Multiselect autoclose property not working

[J]

For Multiselect dropdown we have given the autoclose property to false , but the dropdown closes once we select a item 

Below is the code used

 

 <MultiSelect
            id='ddlf4'
            // className='k-dropdownstate'
                  data={result.result}
                  itemRender={itemRender}
            autoClose={false}
                  value={selval} //{this.props.value || ""}
            filterable={true}
            onChange={onChange}
                  onFilterChange={onFilterChange}

            clearButton={false}
            textField='text'
                  dataItemKey='id'

            //onBlur={this.onLeave}
            tags={[]}

          />

 

Attached the full file also

                                        

[Stefan]

Hello,

Thank you for the example.

I saw that this is in a Grid filter cell and I made the same test. The MultiSelect was not closed after selecting a value:

https://stackblitz.com/edit/react-bjlym3-iplgzs?file=app%2FdropdownFilterCell.js

This still may occur if the entire cell is re-mounted. Please check if the cell is re-mounting after filtering. If that is the case, this has to be resolved on the application level to ensure that the cell is not re-mounted each time the state is changed.

Regards,
Stefan
Progress Telerik

[J]

thanks Stefan,

 

Can you also try to use the itemrender to render a checkbox multiselect in this sample .

 

The below is the code how we implemented.

 const itemRender = (li, itemProps) => {

      const itemChildren = (
        <span
          style={{
            fontSize: "10px",
          }}
        >
          <input
            type='checkbox'
            checked={itemProps.selected}
            onChange={() => {}}
          />
          &nbsp;{li.props.children}
        </span>
      )
      return React.cloneElement(li, li.props, itemChildren)
    }

[Stefan]

Hello,

Adding the item render did not make a different in this case:

https://stackblitz.com/edit/react-bjlym3-5gegtz?file=app%2FdropdownFilterCell.js

I can suggest using this example as a starting point to iliustrate the issue and I will be happy to take a look at it after that.

[J]

hello ,

i have created this , didn't know how to edit the project you shared 

 

https://react-svqw1q.stackblitz.io

https://stackblitz.com/edit/react-svqw1q?file=public/index.html

 

let me know how to make this work as required .

 

Thanks,

EJ

[Stefan]

Hello, EJ,

Thank you for modifying the example.

As I assumed the issue occurs as the component is re-mounted each time.  By default React will re-mount each component that is initialized inside render (with functional components everything is inside render). This is why we have to initialize the component outside of the main component. After I moved the component outside of the main component, the MultiSelect was not closing:

https://stackblitz.com/edit/react-cfc177?file=src%2Fapp%2Fmain.js

If you need to pass extra props to components from the main component, then React recommends using React.Context to pass props between components:

https://reactjs.org/docs/context.html

 

[J]

hello stefan,

The data for multiselect is from the api call of grid and is set in useEffect. Can you please update this sample with how to pass data from main to multiselect component .

 

Thanks,

EJ

[Stefan]

Hello, EJ,

This has to be done on the application level with React.Context.

If there are any issues using React.Context please update the example to replicate the issue and I will take a look and apply the required modifications.

Also, I can suggest checking this demo as in it we show how to use React.Contex to pass extra information to custom components:

https://www.telerik.com/kendo-react-ui/components/grid/rows/row-reordering/ (check the hooks version)

The example is for a different case, but the approach for the React.Context is the same.

[J]

Thank you let me check the link