How to add submit button for SearchField

[rhulse]

I have implemented SearchField to replace an existing form in an app, and I cannot work out how to add a submit button.

All the SearchField handlers work correctly and I can press enter to search.

When wrapping inside Form, and adding a button, the Form onSubmit handler does not return the value in the search field.

I have found one example in the docs which has the Button and the SearchField in a Form, but there is no indication of how to handle the onSubmit Button event correctly.

The example in StoryBook wraps the SearchField and Button in an element . Also no help. :-(

[snowystinger]

I think this will address your issue when it's released #6404

[rhulse]

Thanks @snowystinger. I am not sure. I had my SearchForm wrapped like this (irrelevant bit omitted):

import { Button, Form, Input, Label, SearchField } from 'react-aria-components';

 <Form  onSubmit={onFormSubmit}>
      <SearchField>
        <Label className="hidden">{label}</Label>
        <Input
          placeholder={placeholder}
        />
        <Button
          type="submit"
        >
          <span className="hidden">Search</span>
          <SearchIcon className="w-5 h-5" />
        </Button>
      </SearchField>
    </Form>

All that does is fire the onSubmit handler on the the <Form> and there is no data from the input available. An onSubmit handler on the SearchField works fine when you press enter, but is not fired by the <Button> (of course).

[snowystinger]

The button you've passed to the SearchField will act as a clear button. https://react-spectrum.adobe.com/react-aria/SearchField.html#anatomy
You could put the submit button outside the SearchField and style the two together to look like a single field?

[rhulse]

Thanks.

Putting an outline of the code here for others.

I have done this:

<Form  onSubmit={onFormSubmit}>
  <SearchField>
    <Label className="hidden">{label}</Label>
    <Input
      placeholder={placeholder}
    />
    </SearchField>
    <Button
      type="submit"
    >
      <span className="hidden">Search</span>
      <SearchIcon className="w-5 h-5" />
   </Button>
</Form>

In that case I can attach a separate event handler to the Form, for the key press, and process the data that way. Interestingly the docs say the event is (event: FormEvent<[HTMLFormElement]>) => void... but is actually of type SyntheticBaseEvent.

I was then able to handle the event this way:

 const onFormSubmit = (event: SyntheticBaseEvent) => {
    event.preventDefault();
    console.log(event.target[0].value);
  };