Hello,
sometimes happens that a tag is very long and takes all the available width in the multiselect input box.
In such cases it's very difficult to find the right point to click in order to open the option list.
I'd like to add code to open the popup list when clicking on a tag.
I thought of using the tagRender property to make the tag clickable, but then I don't know what is the most appropriate way to trigger the open event in the multiselect:
const tagRender = (tagData: TagData, li: React.ReactElement<HTMLLIElement, string | React.JSXElementConstructor<any>>) =>
React.cloneElement(li, li.props,
[<span key={sizes.indexOf(tagData.data[0])} className="custom-tag" onClick={() => {console.log('li:', li) /*do something to open the list*/}}>{sizes.indexOf(tagData.data[0])}</span>, li.props.children])Thank you
Kind regards
1 Answer, 1 is accepted
Rank 1
Iron
Iron
Hi,
I ended up doing as follows, but any suggestions to improve it are welcome:
multiselectRef is a reference to the multiselect obtained from React.useRef()
const tagRender = (
tagData: TagData,
li: React.ReactElement<
HTMLLIElement,
string | React.JSXElementConstructor<any>
>
) => {
const ref = multiselectRef.current as any /*have to use any because handleWrapperClick is private*/
let multiselectInstance = <>{li.props.children}</>
if (ref) {
multiselectInstance = <span onClick={() => {ref.handleWrapperClick()}}>{li.props.children}</span>
}
return React.cloneElement(li, li.props, [
multiselectInstance
])
}
Hello,
Yes, I can confirm that using the component ref and calling set state to open it is a good approach.
There is another option to use the opened property of the component, but this will require handling the open state all of the time:
https://www.telerik.com/kendo-react-ui/components/dropdowns/api/MultiSelectProps/#toc-opened