Reset to default value when the 'clear-selected-button' button is pressed?

[Zane Wolf]

IDK if this is already a feature, but from what I read in the document I don't see it.

Specifically: Right now, the default selection is 'All values are selected'. If nothing was selected, then there's nothing on the page, so it's not very interesting. Now, If the user has a few, but not all options selected, and hits the clear-options X button, it deselects everything. Is there a way to make it reselect everything?

I'm using gatsby/react.

I tried using the effect/event listener route but so far no dice. Maybe I'm missing something?

Thanks,
Z

[Harsh Zalavadiya]

@zanewolf I don't get it completely but If you want to re-select everything on press of a button, could be done like this.

https://codesandbox.io/s/xenodochial-dust-qjp6t0?file=/src/App.js

If this is not what you are looking for if possuble can you provide some scenario on what you are trying to achieve

[Zane Wolf]

It's the outcome I want, but not the mechanism. I would like the 'Clear Selection (X)' button to reset to select all, rather than clear all selections. So, here's what is happening:

You open the page and all the possible options are selected.
.

You can then, of course, select just a few of the options:

Now, if you hit the X button on the right:

Then it clears all the selected options, so Nothing is selected.

So, what I want to do is change the function of the '.clear-selected-button' so that the menu resets to the start, where all options are selected. I want to avoid the map being empty as the default of any button. From a user interface/experience stand point, if the user goes through and deselects all the options themselves to get to an empty map, then supposedly that is their intention and that is fine. But I don't want an empty map to be something they accidentally get. Does that make sense?

I've tried adding an event listener to the class '.clear-selected-button' but I can't get it to work. Is there another way?

[Harsh Zalavadiya]

@zanewolf
Oh, If I get this correctly then you can just have something like this preserve initial state and then when button is clicked just restore that back

https://codesandbox.io/s/xenodochial-dust-qjp6t0?file=/src/App.js

[Zane Wolf]

Yes, but is there a way to make the 'revert to initial state' function tied to the X button?

[Harsh Zalavadiya]

@zanewolf no since functionality is internally handled, but you can achieve similar results by just hiding clear icon using ClearSelectedIcon={<div/>} override updated the same Sandbox example