ポップアップカスタムセルエディターとしてreact-selectを使用したag-gridのキーボードイベントの問題

Question

Ag-gridのカスタムセルエディターとしてreact-selectを使用したい

これが コードサンドボックスリンク

ソースをダウンロードできます ここ

npm install
npm start

私はすべてのcssを削除したので、とてもわかりやすく見えますが、それでも機能します。

これが私のpackage.jsonです

{
  "name": "Test",
  "version": "1.5.0",
  "private": true,
  "dependencies": {
    "react": "16.8.1",
    "react-dom": "16.8.1",
    "react-select": "^2.4.1",
    "react-scripts": "2.1.5",
    "ag-grid-community": "20.1.0",
    "ag-grid-react": "20.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "deploy": "npm run build",
    "lint:check": "eslint . --ext=js,jsx;  exit 0",
    "lint:fix": "eslint . --ext=js,jsx --fix;  exit 0",
    "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start"
  },
  "optionalDependencies": {
    "@types/googlemaps": "3.30.16",
    "@types/markerclustererplus": "2.1.33",
    "ajv": "6.9.1",
    "prettier": "1.16.4"
  },
  "devDependencies": {
    "eslint-config-prettier": "4.0.0",
    "eslint-plugin-prettier": "3.0.1"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

index.js

import React from "react";
import ReactDOM from "react-dom";
import Grid from './app/AgGrid'

const colDefs = [
    {
        headerName              : "Test",
        field                   : "test",       
        editor                  : "manyToOne",
        editable                : true,
        suppressKeyboardEvent   : function suppressEnter(params) {
            let KEY_ENTER = 13;
            let KEY_LEFT = 37;
            let KEY_UP = 38;
            let KEY_RIGHT = 39;
            let KEY_DOWN = 40;
            var event = params.event;
            var key = event.which;
            var editingKeys = [KEY_LEFT, KEY_RIGHT, KEY_UP, KEY_DOWN, KEY_ENTER];
            var suppress = params.editing && editingKeys.indexOf(key) >= 0;
            console.log("suppress "+suppress);
            return suppress;
        },
        cellEditor              : "reactSelectCellEditor",
    },
]

ReactDOM.render(
<Grid
    readOnly={false}
    field={null}
    columnDefs={colDefs}
    editable={true}
    editingMode={null}
    rowData={[]}
/>
,
document.getElementById("root")
);

AgGrid.js

import React, { Component } from 'react'
import { AgGridReact } from 'ag-grid-react'
import 'ag-grid-community/dist/styles/ag-grid.css'
import ReactSelectCellEditor from './ReactSelectCellEditor'

class Grid extends Component {

    constructor(props) {
        super(props);
        this.state = {
            columnDefs  : props.columnDefs,
            rowData     : [],
            isFormOpen  : false,
            editedData  : {
                data        : [],
                rowIndex    : null,
                columns     : []
            },
            frameworkComponents:{
                'reactSelectCellEditor': ReactSelectCellEditor,
            },
        }
    }

    updateRowData = (newData,index) => {
        var unsavedData = this.state.rowData.map((row,i)=>{
            if (i === index) {
                return newData
            }
            else{
                return row
            }
        })
        this.setState({rowData:unsavedData})
    }

    onGridReady = params => {       
    }

    createData = () => {
        let fields = this.state.columnDefs.map(column=>{
            return column.field
        })
        let newData = {}
        fields.map(field=>{
            if (field !== "id") {
                newData[field] = ""
            }           
        })
        newData["delete"] = false
        this.setState({rowData:[...this.state.rowData,newData]})
    }

    toggleModal = () => {
        this.setState({isFormOpen:!this.state.isFormOpen})
    }

    setEditedData = (data) => {
        console.log("editedData",data)
        this.setState({editedData:data})
    }


    render() {
        var defaultColDef = {
            editable:this.state.editable,
            sortable:false
        }

        var initColDefs = this.state.columnDefs.map(colDef=>{
            return {
                ...colDef,
                cellEditorParams:{
                    ...colDef.cellEditorParams,
                }
            }
        })

        var renderedColumnDefs = []
        if (this.props.editingMode === "inline") {
            renderedColumnDefs = [
                ...initColDefs
            ]
        }
        else if (this.props.readOnly) {
            renderedColumnDefs = [...initColDefs]
        }
        else{
            defaultColDef = {
                editable:false,
                sortable:false
            }
            renderedColumnDefs = [
                ...initColDefs,
            ]
        }
        var renderedRowData = []
        this.state.rowData.map(row=>{
            if (row.delete !== true) {
                renderedRowData.Push(row)
            }
        })
        return (
            <React.Fragment>
                <AgGridReact
                    defaultColDef                   = {defaultColDef}
                    columnDefs                      = {renderedColumnDefs}
                    rowData                         = {renderedRowData}
                    onGridReady                     = {this.onGridReady}
                    onCellValueChanged              = {this.handleChange}
                    frameworkComponents             = {this.state.frameworkComponents}
                    singleClickEdit                 = {true}
                    stopEditingWhenGridLosesFocus   = {true}
                    reactNext={true}
                />
                <div className="addButton" style={{padding:'5px', border: '1px solid black'}} onClick={()=>this.createData()}>Add</div>
            </React.Fragment>
        );
    } 
}

export default Grid

そしてReactSelectCellEditor.js

import React, { Component } from 'react'
import CreatableSelect  from "react-select/lib/Creatable"
import { components } from 'react-select'
import ReactDOM from 'react-dom'

const colourOptions = [
    { value: 'red', label: 'Red' },
    { value: 'blue', label: 'Blue' },
    { value: 'yellow', label: 'Yellow' }
]

class ReactSelectCellEditor extends Component {

    constructor(props) {
        super(props);
        this.state = {
            value : null
        }
        this.handleChange = this.handleChange.bind(this)
    }

    componentDidMount() {
    }

    handleCreateOption = (inputValue:any) => {
    }

    handleChange(selected){
        this.setState({
            value : selected.value
        })
    }

    afterGuiAttached(param) {
        let self = this;
        this.Ref.addEventListener('keydown', function (event) {
            // let key = event.which || event.keyCode
            // if (key === 37 || key === 38 || key === 39 || key === 40 || key === 13) {
            //     event.stopPropagation();
            //     console.log("onKeyDown "+key);
            // }
        });
        this.SelectRef.focus()
    }

    formatCreate = (inputValue) => {
        return (<p> Add: {inputValue}</p>); 
    };

    isPopup(){
        return true
    }

    getValue() {
        return this.state.value
    }

    render() {
        return (
            <div ref = { ref => { this.Ref = ref }} style={{width: '200px'}}> 
                <CreatableSelect
                    onChange                = {this.handleChange}
                    options                 = {colourOptions}
                    formatCreateLabel       = {this.formatCreate}
                    createOptionPosition    = {"first"}
                    ref                     = { ref => { this.SelectRef = ref }}
                />
            </div>
        );
    }
}

export default ReactSelectCellEditor

ご覧のとおり、ag-gridとポップアップ（セル内ではない）react-selectの間の単純なベアボーン結合実装。

Ag-gridのデフォルトのナビゲーションキーイベントがreact-selectが問題なく動作するのを妨げることを除いて、正常に動作します。

今、私はこれに対する解決策についてここで読んだ 編集中のキーボードナビゲーションのag-gridドキュメント

これが事です：

1. まず、カスタムセルエディターのイベント伝播を停止するソリューション1を試しました。それは動作しますが、奇妙なことにしかしコンテナでバブリングするイベントを停止しますReactSelectCellEditor.jsのコメントアウトされたスクリプトからわかるように、react-select自体ではなく、react-selectの場合、どういうわけかReact Select KeyEventも実行を停止します。理由はわかりません。親要素でイベントの伝播を停止すると、divの子要素であるreact selectイベントの実行が停止します。イベントは子から親へとバブルアップするはずではありませんか？最初の解決策は失敗です。 。

2. 2番目の解決策に関しては、奇妙なのはag-grid自体です。ドキュメントに記載されているように、ag-gridを使用すると、列定義からsuppressKeyboardEventの関数を定義することで、キーイベントをインターセプトできます。編集モードがnotポップアップの場合に機能します。しかし、私の場合はポップアップモードを使用しており、ポップアップモードでは、編集中にsuppressKeyboardEventがトリガーされず、まったく呼び出されないことがわかりました。

今、私は行き詰まっています。最初のソリューションでは、react-selectの動作がおかしくなり、2番目のソリューションでは、ag-gridがおかしな動作をします。どうすればこれを解決できますか？

追加の検索

インターネットを検索した後、React SelectはSyntheticKeyboardEventを使用します。これは、私が間違っていなければ、イベントがすでに最初のキャプチャ/バブリングサイクルを通過した後に実行されます。 DOMツリー。したがって、伝播を停止するとSyntheticKeyboardEventはトリガーされません。ただし、伝播を停止しないと、ネイティブイベントリスナーを使用するag-gridがデフォルトのナビゲーション機能をトリガーし、react-を強制終了します。コンポーネントを選択します。これで私は終わりですか？行き止まりですか？

Answer 1

この解決策はハックであり、アンチパターンであることに注意してください。あなたが述べたように、react selectはSyntheticKeyboardEventを使用し、ネイティブイベントがDOMツリー全体のサイクルを通過するまで待機します。ただし、コードを変更して、他のコンポーネントからreact selectコンポーネントのメソッドにアクセスできるようにすることで、react select機能を呼び出す方法があります。これが、アンチパターンソリューションである理由です。

1. ColDefからsuppressKeyboardEventを削除します

2. Node_modules/react-select/src /Creatable.jsからCreatableSelectコンポーネントのコピーを作成します

3. コピーしたコンポーネントにこれらの行を追加して、onRefからアクセスできるようにします

   componentDidMount() {
      this.props.onRef(this)
   }
   componentWillUnmount() {
      this.props.onRef(undefined)
   }
   

4. コピーでこれらを定義することにより、reactselectの制御メソッドを渡します

   focusOption(param) {
      this.select.focusOption(param);
   }
   selectOption(param) {
      this.select.selectOption(param);
   }
   

5. 次に、コンポーネントをレンダリングするときにonRef = { ref => { this.SelectRef = ref }}を追加します

6. これで、伝播を停止する前に、これらを呼び出して制御をシミュレートできるようになります。

   this.SelectRef.focusOption('up');
   this.SelectRef.focusOption('down');
   

7. このようなメソッドを作成することで、selectの状態に反応するためのアクセス権を取得できます。

   focusedOption() {
      return this.select.state.focusedOption;
   }
   

8. Node_modules/react-select/src/Select.js行1142を参照して、残りのシミュレーションを完了します。