Is there a way to give a Semantic UI React Dropdown the html "name" attribute so it will behave like a normal input element on a form submit?

Question

For normal html elements you can get the value of that element through a form.

 function handleSubmit(event) {
    event.preventDefault()
    const formData = new FormData(e.target)
    console.log(formData.get("test"))
    // logs the value of the html element with the name "test"
  }

<form onSubmit={handleSubmit}>
    <input name="test" />
    <button type="submit">Submit</button>
</form>

The form will assign a key "test" the value of whatever is inside the input on the form's submission.

My question: Is there a way to get this functionality to work with a Semantic UI Dropdown?

Below is ideally what I would think would work but I know doesn't because the component is a wrapper for other elements.

 function handleSubmit(event) {
    event.preventDefault()
    const formData = new FormData(e.target)
    console.log(formData.get("test"))
    // logs the value of the html element with the name "test"
  }

<form onSubmit={handleSubmit}>
    <Dropdown name="test" selection options={
        [{key: '1', text: 'text', value: '1'}]
      }/>
    <button type="submit">Submit</button>
</form>

On form submit, whatever value is selected in that dropdown is put into a key called "test" in formData. If no value is selected, an undefined value is given to the key "test."

Is this possible? I have another work around using a basic html selector but would like to not change a lot of already written code.

Answer 1

Yes, but you will need to deconstruct the dropdown component.

const [open, setOpen] = useState(false)

<Dropdown
    trigger={<Button onClick={() => setOpen(true)}>Open</Button>}
    onClose={() => setOpen(false)}
    icon={null}
    open={open}
    simple
  >
    <Dropdown.Menu>
      ... add the options with the "name" tag ...
    </Dropdown.Menu>
  </Dropdown>