Skip to content

feat: support a Select editor for table inline-edit cells via submitValue#4815

Draft
ernst-dev wants to merge 1 commit into
mainfrom
feat/table-inline-edit-select-cell
Draft

feat: support a Select editor for table inline-edit cells via submitValue#4815
ernst-dev wants to merge 1 commit into
mainfrom
feat/table-inline-edit-select-cell

Conversation

@ernst-dev

Copy link
Copy Markdown
Member

Description

Adds support for using a Select / dropdown editor in Table inline-editable cells, with a first-class submit-on-selection experience.

Table inline editing already allows editConfig.editingCell to render any control (including Select, Autosuggest, and Multiselect). The gap: cellContext.submitValue could only submit the value currently held in React state. A dropdown editor that wants to submit as soon as an option is chosen had to call setValue() and then submitValue() in the same change handler — but the setValue state update has not been applied yet, so a stale value was submitted.

submitValue now accepts an optional explicit value. When a value is passed, it is submitted directly, bypassing the pending setValue update:

editingCell(item, { currentValue, submitValue }) {
  return (
    <Select
      autoFocus={true}
      expandToViewport={true}
      selectedOption={/* ... */}
      options={options}
      onChange={({ detail }) => submitValue(detail.selectedOption.value)}
    />
  );
}

Calling submitValue() with no arguments keeps the existing behaviour of submitting currentValue, so the change is opt-in and fully backward compatible (the only public API change is widening TableProps.CellContext.submitValue from () => void to (value?: V) => void).

Changes:

  • Widen and document TableProps.CellContext.submitValue(value?: V) => void.
  • Update editingCell docs describing submit-on-selection for dropdown editors.
  • New dev page pages/table/inline-edit-select.page.tsx demonstrating a Select that submits on selection alongside the classic submit-button flow.
  • Unit tests for explicit-value submission and the explicit-undefined no-op case.
  • Refreshed the table documenter snapshot for the doc change.

Related links, issue #, if available: AWSUI-61898

Note on the ticket: AWSUI-61898 (V2168547328) currently resolves to an unrelated CloudWatch NPM-credential-rotation alarm ticket, not a component spec. This PR was implemented from the feature description (inline-editable table cell whose editor is a Select/dropdown) and fills the identified gap rather than duplicating the existing editingCell capability.

How has this been tested?

  • npx eslint on all changed files — clean.
  • Full npm run build (quick-build + pages + docs + definitions) — succeeds (only unrelated size-limit warnings).
  • Unit tests: src/table/__tests__/inline-editor.test.tsx (15 tests incl. 2 new), inline-editing-test-utils.test.tsx, and the documenter snapshot suite — all green.
  • New dev page compiles and bundles as part of buildPages; verify manually at /#/light/table/inline-edit-select (select a Status option → submits immediately; Size uses the submit button).
Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

  • Changes include appropriate documentation updates.
  • Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
  • Changes do not include unsupported browser features, see CONTRIBUTING.md.
  • Changes were manually tested for accessibility, see accessibility guidelines.

Security

Testing

  • Changes are covered with new/existing unit tests?
  • Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

…alue

Table inline editing already lets editConfig.editingCell render any control,
including a Select/Autosuggest/Multiselect. However, cellContext.submitValue
could only submit the value held in React state, so a dropdown editor that
wanted to submit as soon as an option is chosen had to call setValue() and then
submitValue() in the same change handler and would submit a stale value (the
setValue state update has not been applied yet).

submitValue now accepts an optional explicit value: submitValue(value). When a
value is passed it is submitted directly, bypassing the pending setValue update,
enabling a submit-on-selection experience for dropdown editors:
onChange={({ detail }) => submitValue(detail.selectedOption.value)}.

Calling submitValue() with no arguments keeps the existing behaviour of
submitting currentValue, so the change is opt-in and fully backward compatible.

- Widen TableProps.CellContext.submitValue to (value?: V) => void and document it
- Update the editingCell docs for submit-on-selection usage
- Add a dev page (pages/table/inline-edit-select.page.tsx) showing a Select that
  submits on selection alongside the classic submit-button flow
- Add unit tests for explicit-value submission and explicit-undefined no-op
- Refresh the table documenter snapshot
@codecov

codecov Bot commented Jul 23, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.61%. Comparing base (f97729a) to head (bc6b46e).

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #4815   +/-   ##
=======================================
  Coverage   97.61%   97.61%           
=======================================
  Files         952      952           
  Lines       30816    30820    +4     
  Branches    11318    11318           
=======================================
+ Hits        30081    30085    +4     
- Misses        688      728   +40     
+ Partials       47        7   -40     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant