feat: support a Select editor for table inline-edit cells via submitValue#4815
Draft
ernst-dev wants to merge 1 commit into
Draft
feat: support a Select editor for table inline-edit cells via submitValue#4815ernst-dev wants to merge 1 commit into
ernst-dev wants to merge 1 commit into
Conversation
…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 Report✅ All modified and coverable lines are covered by tests. 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. 🚀 New features to boost your workflow:
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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.editingCellto render any control (includingSelect,Autosuggest, andMultiselect). The gap:cellContext.submitValuecould 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 callsetValue()and thensubmitValue()in the same change handler — but thesetValuestate update has not been applied yet, so a stale value was submitted.submitValuenow accepts an optional explicit value. When a value is passed, it is submitted directly, bypassing the pendingsetValueupdate:Calling
submitValue()with no arguments keeps the existing behaviour of submittingcurrentValue, so the change is opt-in and fully backward compatible (the only public API change is wideningTableProps.CellContext.submitValuefrom() => voidto(value?: V) => void).Changes:
TableProps.CellContext.submitValue→(value?: V) => void.editingCelldocs describing submit-on-selection for dropdown editors.pages/table/inline-edit-select.page.tsxdemonstrating a Select that submits on selection alongside the classic submit-button flow.undefinedno-op case.Related links, issue #, if available: AWSUI-61898
How has this been tested?
npx eslinton all changed files — clean.npm run build(quick-build + pages + docs + definitions) — succeeds (only unrelated size-limit warnings).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.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
CONTRIBUTING.md.CONTRIBUTING.md.Security
checkSafeUrlfunction.Testing
By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.