Empty selects have a ValueContainer whose class name ends with value-container. This gets picked up by the attribute selector matcher added in #86, which then causes value container to be erroneously treated as the react-select parent.
$0.closest('[class^="css-"][class$="-container"]')
<div class="css-1hwfws3 value-container">…</div>
When a select has a value, this is no longer an issue because value-container--has-value becomes the last class in the list and the parent is correctly found:
$0.closest('[class^="css-"][class$="-container"]')
<div class="css-1pcexqc-container">…</div>
However, this also breaks if you provide a className to the react-select component because react-select places it at the end.
It seems that we need to make the matcher for the parent only look at the first class in the class attribute value, but I'm unsure if that's possible with contains.
Empty selects have a
ValueContainerwhose class name ends withvalue-container. This gets picked up by the attribute selector matcher added in #86, which then causes value container to be erroneously treated as the react-select parent.When a select has a value, this is no longer an issue because
value-container--has-valuebecomes the last class in the list and the parent is correctly found:However, this also breaks if you provide a
classNameto the react-select component because react-select places it at the end.It seems that we need to make the matcher for the parent only look at the first class in the
classattribute value, but I'm unsure if that's possible withcontains.