Fluent UI dropdown required not identified

Question

I have used the fluent UI dropdown in my form. The dropdown is a required field for me. I have used the "Required Dropdown" from Fluent UI but that doesn't work. I have tried this

<Dropdown styles={{ title: {},dropdown: {}}} title="" placeholder={} onRenderLabel={} options={} onChange={} required={true} errorMessage={}/>

and this also

<Dropdown styles={{ title: {},dropdown: {}}} title="" placeholder={} onRenderLabel={} options={} onChange={} required errorMessage={}/> but none of them work.

Can someone please help me solve this issue?

I tried searching for a solution. But, if my research is it is it a bug from the Microsoft side? Else, if not can someone help me with this? — DSR, Sep 27 '21 at 14:00
There's a related GitHub issue: https://github.com/microsoft/fluentui/issues/14403 Sadly it has been closed automatically due to inactivity… — qutax, Nov 26 '21 at 13:56

score 0 · Answer 1 · answered Oct 06 '21 at 12:31

I am also facing the same issue. Adding Required={true} or aria-required="true" did not help. Required property- just add an asterisk to indicate it as required field but not validated during submit. This property works as expected in controls like TextField.

Issue screenshot

My code:

render() {
    return (
      <div className='dropdownExample'>
        <form>
          <Dropdown required={true} aria-required="true" label='Required dropdown contrsl'
            options={
              [
                { key: 'A', text: 'Option a' },
                { key: 'B', text: 'Option b' },
                { key: 'C', text: 'Option c' },
                { key: 'D', text: 'Option d' },
                { key: 'E', text: 'Option e' },
                { key: 'F', text: 'Option f' },
                { key: 'G', text: 'Option g' },
              ]
            } />         
          <TextField label="Required textfield control" required={true} />
          <button type="submit">Submit</button>
        </form>
      </div>
    );
  }

score 0 · Answer 2 · answered Oct 07 '21 at 07:48

At Fluent UI documentation you have example of Dropdown with error message. This is a basic idea how you can control errorMessage property:

const Options = [
  { key: 'A', text: 'Option a' },
  { key: 'B', text: 'Option b' },
  { key: 'C', text: 'Option c' },
  { key: 'D', text: 'Option d' },
  { key: 'E', text: 'Option e' },
];

const DropdownErrorExample = () => {
  const [dropdownValue, setDropdownValue] = React.useState(null)
  return (
    <Dropdown
      placeholder="Select an option"
      label="Dropdown with error message"
      options={Options}
      errorMessage={!dropdownValue ? 'You need to select a value' : undefined}
      required={true}
      onChange={(_, __, index) => setDropdownValue(Options[index].key)}
      selectedKey={dropdownValue}
    />
  );
};

Codesandbox example.

This just helps in giving an error message at the bottom but it doesn't make the field a required or mandatory field right. Can you help me in making it a mandatory field in such a way that even though people ignore the field they should not be able to move forward. — DSR, Oct 19 '21 at 10:29

Fluent UI dropdown required not identified

2 Answers2