clear* methods don't allow for sufficient customization

[maciejmyslinski]

clear* methods assume the clearing icon is an svg. That's not always the case with customized react-select components. Could we improve the API of clear* methods so that such custom select components can be tested with them? eg. select method takes a config object.

[AmirTugi]

Having the same issue.
Trying to make a workaround with adding a <svg aria-hidden style={{ display: 'none' }} /> or something.
Would be nice to have support from the lib.

[romgain]

Thanks for reporting this!

Would either of you be able to add this functionality in a PR?

[AmirTugi]

What is the desired functionality?
How do we allow flexibility with 0 configuration here? 🤔

[romgain]

Unfortunately, I don't think this can be achieved with 0 config.
The 2 clear* methods would need to take in an optional config object with a clearElementSelector attribute that we'd use instead of the default hidden svg.

For instance, it could look like this:

await selectEvent.clearFirst(getByLabelText("Food"), { clearElementSelector: "div[title='clear options']" });