deselect Functionality tab outside of dropdown

[ParmarNikita06]

I want to implement a custom deselect functionality that can be used anywhere outside the dropdown. attached image for reference.

[ParmarNikita06]

@mrchief We have already achieved to make multiple filter dropdowns work using their plugin, but the thing we just want is to keep the selected tag-list pills out of all dropdowns and make the close/deselection work. (because in the current structure if there are a selection of many nodes, the tag list inside the dropdown become so large disturbing UI)

[mrchief]

@ParmarNikita06 sorry for the delay. This is more to do with your application than the component, so having said that, the way I'd go about doing it is:

• hide tags for all dropdowns
• listen to onChange and dispatch actions to update you page state (assuming you're using some state management tool like redux/mobx/react context)
• the state object would need to contain the following:
  • the label's key and value
  • the source dropdown's id
  • and a pointer to the underlying data object (this is not the initial data but the update tree for each component - something you'd have to keep track of, again by listening to onChange event handlers for each dropdown and you'd need something like https://github.com/dowjones/react-dropdown-tree-select/blob/develop/docs/HOC.md#tree-node-paths to keep the tree in sync with your data object)

After that, when a user clicks on close on a tag, you:

• take the tag's source dropdown id
• take the most recent tree data for the dropdown
• toggle that node's data.selected to false
• re-render the component - this should re-render the component in the same exact state but without the deleted tag
• if the dropdown was previously open and you want to keep it that way, you'd need to pass https://github.com/dowjones/react-dropdown-tree-select#initial to open it on a re-render