Hi,
I'm using Nextjs 14 with syncfusion react grid version 24.2.9, in my Grid I have a dropdown with external data and foreignkey.
When I allow the filtering in the Dropdown, and open it, the dropdown instantly closes.
When I disallow the filtering, it works like expected.
Here is my Code:
<GridComponent key={key} gridLines="Both" id='MarketinglistGrid' beforePaste={beforePaste} allowResizing={true} height="100%" width="100%" ref={g => grid = g} loadingIndicator={loadingIndicator} beforeBatchSave={beforeBatchSave} commandClick={commandClick} queryCellInfo={tooltip} allowMultiSorting={true} allowSelection={true} allowSorting={true} actionComplete={reloadAfterChanges} dataBound={renderComplete} allowFiltering={true} selectionSettings={settings} pageSettings={pageSettings} filterSettings={filterOptions} editSettings={editOptions} toolbar={toolbarOptions} infiniteScrollSettings={infiniteScrollSettings}>
<ColumnsDirective>
<ColumnDirective headerText='Aktionen' commands={commands} filter={false} width={100} />
<ColumnDirective visible={setVisibility("Id", false)} field='caedbid' defaultValue={null} allowEditing={false} headerText='CAE-DB ID' width={150} isPrimaryKey />
<ColumnDirective visible={setVisibility("Mandat", true)} field='mandate' headerText="Mandat" editType='dropdownedit' foreignKeyField="id" foreignKeyValue="label" dataSource={mandates} defaultValue={1} width={150} />
<ColumnDirective visible={setVisibility("Name", true)} field='name' headerText='Name' allowEditing={true} width={150} defaultValue={null} type='string' validationRules={{required: true}} headerTemplate={customHeaderTemplate}/>
<ColumnDirective visible={setVisibility("Status", true)} field='status' headerText='Status' editType='dropdownedit' edit={{ params: { query: new Query(), dataSource: states, fields: { value: 'status', text: 'status' } } }} allowEditing={true} width={175} defaultValue={states[0].status} type='string' />
<ColumnDirective visible={setVisibility("Typ", true)} field='type' headerText='Typ' editType='dropdownedit' edit={{ params: { query: new Query(), dataSource: types, fields: { value: 'type', text: 'type' } } }} allowEditing={true} width={200} defaultValue={null} type='string' validationRules={{required: true}} headerTemplate={customHeaderTemplate}/>
<ColumnDirective visible={setVisibility("Beschreibung", true)} field='description' headerText='Beschreibung' allowEditing={true} width={200} defaultValue="" type='string' />
<ColumnDirective visible={setVisibility("Verantwortlicher", true)} field='responsible' headerText='Verantwortlicher' editType='dropdownedit' dataSource={users} edit={{params: {showClearButton: true}}} foreignKeyField='id' foreignKeyValue='name' allowEditing={true} defaultValue="" />
</ColumnsDirective>
<Inject services={[Freeze, Edit, Toolbar, Filter, Sort, Search, InfiniteScroll, CommandColumn, ForeignKey, Resize]} />
</GridComponent>
