Feature Request: Replaceable DummyInput

[dreamwasp]

I've run into a situation where I would like to replace the DummyInput rendered when isSearchable is false, as is possible with other components of React-Select.

- What's your use case?
I need to spread custom props directly onto the HTML input, which I also need to maintain its value in the DOM when an element is selected. I am using this with React-Recurly which requires both of these things. For instance:

<form id="my-form">
  <!-- this data-recurly prop + value must be provided -->
  <input type="text" data-recurly="country" value="AU">
  <button>submit</button>
</form>

- What interface do you have in mind?
I would like to be able to replace DummyInput through the components prop.

- Can you point to similar functionality with any existing libraries or components?
I have a rough draft of when I am proposing pushed on this branch, I think it makes sense to have DummyInput be replaceable as Input itself is replaceable.

[ebonow]

Greetings @dreamwasp ,

The DummyInput only exists for the purpose of determining is the Select is focused or blurred (which triggers the styling or hiding/showing menu). It has no correlation to any selected value. Additionally, the Input component itself will clear will its value by default unless that behavior is overridden.

What you might be aiming for is not the DummyInput, but rather the generated hidden field which has no official component name but can be seen here:

react-select/packages/react-select/src/Select.tsx

Line 1884 in e6ff154

renderFormField() {

This renders only if a name has been provided for the Select so that the form can use this value when submitting a form natively. You should be able to access this onMount using a hook and querying for the hidden input field with the same provided name you gave to your select. Of course you can adjust the query selector to better fit your needs should you have multiple instances.

Codesandbox demo

const RecurlySelect = ({ recurly, name, ...props }) => {
  useEffect(() => {
    const query = `input[name="${name}"]`;
    const input = document.querySelector(query);
    input.setAttribute("data-recurly", recurly);
  }, [name, recurly]);

  return <Select {...props} name={name} />;
};

Please let me know if this helps or if I am missing something in this implementation.

[dreamwasp]

Hi @ebonow -

This implementation does work for submitting the proper value, but we depend on cypress-axe for our accessibility testing and the DummyInput generates an error when used this way:

"Fix any of the following:
  Form element does not have an implicit (wrapped) <label>
  Form element does not have an explicit <label>
  aria-label attribute does not exist or is empty
  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  Element has no title attribute
  Element has no placeholder attribute
  Element's default semantics were not overridden with role="none" or role="presentation""

Alternatively, I suppose the feature ask could be changes to add role='none' or role='presentation' to the Dummy Input so that it does not trigger this accessibility error.

[ebonow]

Excellent that this fulfills your requirement for recurly.

Regarding accessibility, DummyInput does accept the prop values for both aria-label and aria-labelledby if provided to the Select. If you are running cypress-axe, then how is the Input component set up such that it passes but the DummyInput doesn't?

@seancurtis are you aware of any positive/negative impacts to adding roles to the DummyInput?

[dreamwasp]

Did some tweaking to how my component was set-up, and finally had success with cypress-axe as long as I match my aria-labelledby correctly, thank you so much for your help!