DropdownListComponent inside Custom Grid Dialog

[Mehmet]

"When I navigate to the second page of the Tabcomponent and click on the default dialog close button, I get this error. How can I resolve it?"

Error:


dom.js:346 Uncaught TypeError: Cannot read properties of null (reading 'closest')
    at closest (dom.js:346:19)
    at DropDownList.resetValueHandler (drop-down-list.js:592:88)
    at FormValidator.reset (form-validator.js:218:22)
    at FormValidator.destroy (form-validator.js:237:14)
    at Edit.destroyForm (edit.js:788:57)
    at Edit.onActionBegin (edit.js:710:22)
    at Observer.notify (observer.js:107:29)
    at Component.notify (component.js:353:32)
    at Observer.eval (normal-edit.js:562:26)
    at Observer.notify (observer.js:110:32)
    at ComponentBase.trigger (component-base.js:266:36)
    at NormalEdit.closeEdit (normal-edit.js:558:14)
    at DialogEdit.closeEdit (dialog-edit.js:38:36)
    at Edit.closeEdit (edit.js:210:25)
    at Grid.closeEdit (grid.js:4357:29)
    at DialogEditRender.dialogClose (dialog-edit-renderer.js:151:21)
    at Observer.notify (observer.js:107:29)
    at Base.trigger (base.js:197:43)
    at Popup.close (dialog.js:538:23)
    at Observer.notify (observer.js:107:29)
    at Base.trigger (base.js:197:43)
    at Popup.hide (popup.js:663:18)
    at Observer.eval (dialog.js:1594:40)
    at Observer.notify (observer.js:92:32)
    at Base.trigger (base.js:197:43)
    at Dialog.hide (dialog.js:1580:18)
    at Dialog.closeIconClickEventHandler (dialog.js:184:19)

CustomGridTabComponent:

return (

<div className="custom-user-modal p-fluid">

<TabComponent

selectedItem={selectedTabIndex}

selected={(args: any) => setSelectedTabIndex(args.selectedIndex)}

animation={{

previous: {effect: 'None', duration: 200, easing: 'linear'},

next: {effect: 'None', duration: 200, easing: 'linear'},

}}>

<TabItemsDirective>

<TabItemDirective

header={{text: t('UserDetail')}}

content={renderUserInfoTab}

/>

<TabItemDirective

header={{text: t('assignTenantRole)}}

content={renderTenantRoleTab}

/>

</TabItemsDirective>

</TabComponent>

</div>

);

CustomGridModal Tab-2 page:

const renderTenantRoleTab = () => (

<div className="pt-3">

<div className="grid pb-3 border-bottom-1 border-gray-300 ">

<div className="col-12 md:col-6 pr-2">

<label className="font-bold mb-2 block">{t('tenant')}</label>

<DropDownListComponent

id="selectedTenant"

dataSource={(tenantsData?.items as any[]) || []}

fields={{text: 'name', value: 'id'}}

placeholder={t('userRoles.selectedTenant')}

change={(e: any) => setSelectedTenantId(e.itemData.id)}

value={selectedTenantId}

/>

</div>

<div className="col-12 md:col-6 pl-2">

<label className="font-bold mb-2 block">

{t('userRoles.add')}

</label>

<MultiSelectComponent

id="selectedRoles"

dataSource={rolesData || ([] as any[])}

fields={{text: 'name', value: 'id'}}

placeholder={t('userRoles.selectRoles)}

mode="CheckBox"

showSelectAll={true}

change={(e: any) => setSelectedRoles(e.value)}

value={selectedRoles}

/>

</div>

</div>

</div>

);

[Joseph Christ Nithin Issack]

Hi Mehmet,

Greetings from Syncfusion Support.

Based on your description, we understand that when editing a record using a custom dialog that includes a tab component, you encounter a script error upon switching to the second tab and subsequently closing the dialog using the close button.

To investigate this issue, we attempted to replicate the behavior on our end by creating a sample based on the details you provided. However, we were unable to reproduce the error. For your reference, we have attached the sample we used for testing:

Sample: https://stackblitz.com/edit/react-fhz3duin?file=tabTwo.js

   If you still face the issue, kindly share the details below for further validation.

1. Complete Code Implementation
• The full grid rendering code, including the configuration for the dialog template and the tab component.
• Any relevant event handlers (such as actionBegin, actionComplete, or custom event handlers).
2. Reproducible Sample
• If possible, modify the provided sample to reproduce the issue or share a minimal working sample where the issue is occurring.
3. Behavior Analysis
• Does the issue occur on the first edit attempt, or does it happen after multiple edits?
• Does the issue persist across different browsers, or is it specific to a particular browser?
• Does the error occur with any specific data or after certain actions?
4. Video Demonstration
• A short screen recording demonstrating the steps to reproduce the issue would be highly helpful.
5. Environment Details
• The Syncfusion package versions you are using.
• The React version and any other dependencies that might affect the behavior.

These details will enable us to identify the root cause and provide a prompt resolution.

Regards,

Joseph I.