mi6 / mi6/ic-ui-kit

[ic-text-field]: Pressing `Enter` in a form should submit the form

Open
#1,781 2 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

component: ic-text-field
Dominant language
TypeScript
Stars
53
Forks
63
Avg merge
2d 4h
Merged PRs (30d)
15

Description

## Summary
Whilst focus is on an `ic-text-field` and the `` is in a ``, pressing `Enter` in the text field should submit the form.

## 💰 Use value
According to [Mozilla](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event):
"The submit event fires when:
- the user clicks a [submit button](https://developer.mozilla.org/en-US/docs/Glossary/Submit_button),
- the user presses Enter while editing a field (e.g. ) in a form,
- a script calls the [form.requestSubmit()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit) method"

## 📝 Acceptance Criteria
GIVEN a user has a form
WHEN there is an `ic-text-field` in the form
AND focus is on the `ic-text-field`
AND there are no required form fields in the form
THEN, pressing the "Enter" key should submit the form

GIVEN a user has a form
WHEN there is an `ic-text-field` in the form
AND focus is on the `ic-text-field`
AND there are required form fields in the form
AND all the required form fields have been actioned or contain text
THEN, pressing the "Enter" key should submit the form

GIVEN a user has a form
WHEN there is an `ic-text-field` in the form
AND focus is on the `ic-text-field`
AND there are required form fields in the form
AND some of the required form fields have not been actioned or do not contain text
THEN, pressing the "Enter" key should not submit the form

## Additional information
Questions:
- do we have a defined list of form components?

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating the ic-text-field component and any form-related tests in the repository. Reproduce the Enter-key behavior described in the acceptance criteria, then verify submission with and without required fields and confirm that incomplete required fields prevent submission.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.