Select's required prop doesn't work

[fterradev]

What RMWC Version are you using?

v0.0.1-rc12

What are the steps to reproduce the bug?

Use the Select tag as defined below inside a form and try to submit it without selecting any option.

<Select
  cssOnly
  required
  name="food"
  placeholder="-- cssOnly --"
  options={['Cookies', 'Pizza', 'Icecream']}
/>

What is the expected behavior?

The form should prevent the submition for this required field has not been filled.

What is the actual behavior?

The form gets inadvertently submitted, with food value of '_placeholder'.

Any other information you believe would be useful?

I guess this regards to cssOnly Select tags only.
I guess the placeholder option should be set with some null value instead of '_placeholder', probably an empty string. And/or maybe let the user set its value.

[jamesmfriedman]

You are absolutely right. In the meantime, can you try making your own placeholder as one of the select options with a blank value and verify it works the way you think it should?

The required prop should be passed along, so it sounds like it’s just the value.

[fterradev]

Fortunately, if the options is a map with non-numerical keys, this can achieved with something like:

<Select
  cssOnly
  name="food"
  required
  options={{
    '': '-- cssOnly --',
    ...{
      'Cookies': 'Cookies',
      'Pizza': 'Pizza',
      'Icecream': 'Icecream'
    }
  }}
/>

Note: if the keys are numerical (and even if they are numerical strings), they appear before our empty string, which makes our placeholder to be the last option, which is undesired.

We can also get the same result with some "automatic" transformation on our initial array with reduce:

  options={{
    '': '-- cssOnly --',
    ...['Cookies', 'Pizza', 'Icecream'].reduce((items, item) => 
      {
        items[item] = item;
        return items;
      }, {}
    )
  }}

Or by building the list with option tags:

<Select
  cssOnly
  name="food"
  required
>
  <option>-- cssOnly --</option>
  {
    ['Cookies', 'Pizza', 'Icecream'].map(item =>
      <option key={item} value={item}>{item}</option>
    )
  }
</Select>

[jamesmfriedman]

You might just want to use the formatted options from the docs, it’s the first example. The object map is there for convenience but you can’t guarantee ordering with it.

I’ll fix the placeholder in the next release, until then you can use your blank option workaround.

[jamesmfriedman]

@fterradev check out that commit and verify that it will fix this issue.

[jamesmfriedman]

This should be fixed by V1