[Bug]: Text filter submits form

[JElgar]

Browser

Chrome, Safari, Firefox, Edge

Package version

3.0.1335

React version

18.3.1

Description

We have a form, where we allow users to select a value using a table. The table has a text filter.

If a user clicks enter in the text filter, the form is submitted. Ideally we could disable this functionality on the text filter.

Source code

No response

Reproduction

Sandbox

import { Form, Table, TextFilter } from "@cloudscape-design/components";

export default function App() {
  return (
    <form>
      <Form>
        <Table items={[]} columnDefinitions={[]} filter={<TextFilter />} />
      </Form>
    </form>
  );
}

Click enter when focuses on the text filter and see that the form submits

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate problems

[Al-Dani]

Hello,

Could you use onChange event to prevent the submission?

[avinashbot]

Additionally, there are a lot of form elements that comprise the table (checkboxes, filters, expand/collapse controls, etc) that aren't really designed to be placed inside a form context. Is it possible to move the table selection out of the form context or are you using the table controls as part of the form itself?

[JElgar]

Could you use onChange event to prevent the submission?

I'm not sure how onChange could be used in this case? Is onChange linked to pressing the enter key? Any chance you could provide an example based on the sandbox I shared?

are you using the table controls as part of the form itself

Yes we are, we are using the table in a form to select a resource. (Like a select drop-down but with more data)

[taheramr]

I'd argue again that placing a table inside a form is not ideal, why do you need to submit your form with table changes?

table in a form to select a resource You can still put the table outside the form and listen to the changes and submit the form using its ref or using libraries like react-form-hook.

A simplified example could be:

const onTableSelection = () => ref.submit({...});
<>
<Table {...props}  />
<form ref={ref}

</form>
</>

[gethinwebster]

Sorry for the delay following up on this. You can prevent this behavior by attaching an onKeyDown listener to an element wrapping the TextFilter:

<div
  onKeyDown={(e) => {
    if (e.key === "Enter" && e.target.tagName === "INPUT") {
      e.preventDefault();
    }
  }}
>
  <TextFilter
    filteringText={text}
    onChange={(e) => setText(e.detail.filteringText)}
  />
</div>

Sandbox

[gethinwebster]

Closing due to inactivity, feel free to reopen if there are any outstanding questions.