[EuiInlineEdit] Add `onKeyDown` Mapping for Saving and Canceling Edits #6742

breehall · 2023-04-28T15:29:24Z

Relates to #3928

Summary

Allows users to select Enter to save and Escape to cancel inline edits. When a custom onKeyDown function is passed in through editModeProps.inputProps , it will take priority and override the default functionality.

QA

1. Use the Enter key to save an edit -- (use the title example)
2. Use the Escape key to cancel an edit -- (use the title example)
3. View a custom keyDown event that works along with the default Enter key event -- (use the text example)

General checklist

Added documentation
Added or updated jest and cypress tests
Checked for breaking changes and labeled appropriately
Checked for accessibility including keyboard-only and screenreader modes

… to the save and cancel functions respectively.

…ping as an example

kibanamachine · 2023-04-28T15:52:14Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6742/

cee-chen

This is working great on staging/QA - I mostly just have code cleanup, testing, and screen reader accessibility comments

EDIT: Sorry, forgot - I do have a major/blocking question on consumer onKeyDowns: #6742 (comment)

src/components/inline_edit/inline_edit_form.tsx

src/components/inline_edit/inline_edit_form.test.tsx

src/components/inline_edit/inline_edit_form.tsx

cee-chen · 2023-05-01T18:27:06Z

src/components/inline_edit/inline_edit_form.tsx

@@ -184,6 +202,10 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
              isInvalid={isInvalid}


One more quick note that I'm attaching to the nearest prop for convenience/collapsibility: unfortunately, we need to either tweak or remove using autoFocus as a shortcut for focus management on edit form open. This is because if a consumer uses the startWithEditOpen prop, on page load the edit form will take focus, which is likely not what the user wants to happen. We only want to auto focus on the inline edit input when the button to toggle edit mode is clicked.

BTW - the reason this isn't currently happening on the EUI docs is because we have extra focus state management on page load that targets our screen reader announcement. But for a blank sandbox environment, that would be happening.

This note isn't strictly related to the onKeyDown behavior so I'd be open to addressing it in a separate PR, or if you want we can bogart it into this PR as it is tagentially related accessibility/focus management. Up to you, and let me know if you want to discuss the options for handling this (e.g., calling .focus() manually, or potentially passing autoFocus as undefined to start and only as true after the read mode button is clicked) in-depth.

+1 to a custom focus management or an autoFocus prop that only becomes true after the editModeForm is rendered.

After doing a bit more SR testing locally, I realized we have autoFocus on both edit and read modes. With that in mind I strongly think we need to be using manual .focus() calls instead of relying on autoFocus.

@breehall Let's actually address this in a separate PR and not this one. Since the PR I opened (#6746) handles SR-adjacent work, I'll tweak the focus behavior in that one.

If you're interested in pairing on it to follow along on the work needed, LMK - if not I can just yolo ahead and link to the commit after.

@cee-chen I just got this notification right as I pushed c48ee4f 😆
We can just move this to your PR or completely remove if it's not what you were looking for

Let's revert. We need to remove both autoFocuses, not just one, and we need to focus both the read mode toggle and the input when switching between the two modes. It also can't be in a useEffect, which unfortunately still has the same issue where it will fire and steal focus on mount.

Gotcha! I reverted this commit. I don't think I'll have enough time this afternoon to pair. If you'd like, we can pair tomorrow or if you're more comfortable with rolling it into your PR, I can review it there!

1Copenut

Just two follow on comments to Cee's suggestions from me. Tested locally with VoiceOver and Safari and keyboard navigation. Will test with NVDA after the aria-describedby attributes are included.

src/components/inline_edit/inline_edit_form.tsx

1Copenut · 2023-05-01T21:20:00Z

src/components/inline_edit/inline_edit_form.tsx

@@ -184,6 +202,10 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
              isInvalid={isInvalid}


+1 to a custom focus management or an autoFocus prop that only becomes true after the editModeForm is rendered.

…s and updating logic to run both the default and custom onKeyDown methods for the edit mode input.

…t mode input in favor of manual focus management. Created a ref/useEffect combo that keeps track of the state and sets focus on the edit mode input only when the read mode button is clicked.

kibanamachine · 2023-05-02T01:17:17Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6742/

breehall · 2023-05-02T17:20:43Z

✨ What's New

Added aria-describedby property to improve the accessibility of the edit mode input (ref)
Manual focus for the edit mode input (we can remove this and add it to the next PR also) (ref)
Various other structural changes and test updates

kibanamachine · 2023-05-02T17:40:16Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6742/

src/components/inline_edit/inline_edit_form.tsx

src-docs/src/views/inline_edit/inline_edit_text.tsx

src/components/inline_edit/inline_edit_form.test.tsx

cee-chen · 2023-05-02T18:24:28Z

That was my last batch of minor cleanup comments above. The aria-describedby sounds great when testing with a screen reader - nice work!

Let me know if you want to pair on the autoFocus work today - no worries if not, I can roll it into my open PR.

kibanamachine · 2023-05-02T18:34:36Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6742/

…side the default events

cee-chen

Looking great! 🚢

kibanamachine · 2023-05-02T19:57:05Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6742/

…onents (#6757) * [EuiInlineEdit] Create Component Directory and Base Functionality (#6598) * Initial directory setup for EuiInlineEdit * Initial structure for EuiInlineEdit docs * Created EuiInlineEdit base component that toggles between a text input and text or title. * Replaced button icons with full EuiButtons with text. Positioned the buttons on the right side of the input * Added early snapshot for component * Added aria-labels with i18n for the editView input, save button, and cancel buttons. Updated the props to require an input aria label because the option to show the label on the input was removed. This was removed to preserve the layout and prevent the input from appearing to bounch when switching between editView and readView. * Combined with last commit - forgot to hit save * Made defaultValue a required field because if there is no value passed in, the button will be empty (with the exception of the edit icon) * Updated basic snapshot tests, updated docs * Added button groups to documentation to make toggling button sizes easier * Update src/components/text/index.ts Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> * Update src-docs/src/views/inline_edit/inline_edit.tsx Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> * Update src-docs/src/views/inline_edit/inline_edit.tsx Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> * Update src/components/inline_edit/inline_edit.tsx Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> * Update src/components/inline_edit/inline_edit.tsx Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> * Update src/components/inline_edit/inline_edit.test.tsx Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> * Update src/components/inline_edit/inline_edit.tsx Co-authored-by: Elizabet Oliveira <elizabet.oliveira@elastic.co> * Separated the two EuiInlineEdit examples into their own files * Created additional logic to resize buttons and fieldtext elements when when the size of EuiInlineEdit is small or lower. * Created a heading prop to allow consumers to choose the level heading they would like the InlineEdit (title) to be wrapped inside of. If one isn't provided, h2 will be the default. * Updated basic test snapshots for EuiInlineEdit * Updated new i18n tokens to be more explicit about their purpose * Split EuiInlineEdit into three components: EuiInlineEditText, EuiInlineEditTitle, and EuiInlineEditButtons. - Created utils and types file to share common props and utility functions between all three components * Oops * EuiInlineEdit Updates - Updated the onConfirm prop to return a boolean flag that will determine if the text value is saved or not in editMode - Updated edit/read prop variable names - Exported EuiButtonEmptyPropsForButton because it's being used as a type for the new readMode prop - Added base testing files for EuiInlineEditTitle and EuiInlineEditButtons * Remove testing props from inline edit example * Separated repeated logic inside of EuiInlineEditTitle and EuiInlineEditText into a new component called EuiInlineEditForm. This new form component is responsible for the toggling of readMode and editMode for EuiInlineEdit. * Move types to shared internal form component * Pass top-level props instead of in a `props` obj * Remove top level read state, use render prop instead - so that EuiInlineEditForm is completely in charge of state * Remove EuiInlineEditButtons, roll into EuiInlineEditForm as inline * Removed utility in favor of component-specific size logic - while still DRYing out the underlying form sizes being used * Fix types and update snapshots * Clean up type def --------- Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> Co-authored-by: Elizabet Oliveira <elizabet.oliveira@elastic.co> Co-authored-by: Constance Chen <constance.chen.3@gmail.com> * [EuiInlineEdit] Add Dynamic Font Sizing & Truncation Styling (#6660) * Created styling for EuiInlineEdit text and title components that adjusts the font-size used within the editMode form control. Added styling to ensure that very long text is truncated inside of the EuiEmptyButton used in readMode * Updated snapshot tests for EuiInlineEdit * Update src/components/inline_edit/inline_edit_title.tsx Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> * Update src/components/inline_edit/inline_edit_text.tsx Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> * Updated snapshots for EuiInlineEdit test cases after modification in Github UI --------- Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> * [EuiInlineEdit] Creation of the `isLoading` and `isInvalid` Props (#6667) * Added isInvalid and isLoading props to EuiInlineEdit components (form, title, text). * [REVERT ME] Added prop toggles to the EuiInlineEditText example for validation * Revert "[REVERT ME] Added prop toggles to the EuiInlineEditText example for validation" This reverts commit b72c9ca. Reverting documentation change that was for PR assistance. It's no longer needed. * Updated EuiInlineEditForm by removing the isLoading prop on the confirm and cancel buttons. Instead, these are wrapped in the skeleton component when loading. * Added a new documentation view for the isLoading prop * Updated the editModeProps property to include the erorr prop from EuiFormRowProps. Additionally wrapped EuiFieldText inside of EuiFormRow. This is to allow consumers to pass an error message to the EuiFormRow when the isValid prop is false. * -[PR Feedback] Removed the onChange method from the loading example and placed it directly on the switch element - Created the isValid documentation example * Remove blunder * Added the skeletonHeight index to sizes object. The Skeleton buttons used when isLoading is true need to be smaller when the form is compressed * [PR Feedback - Update the editModeProps prop to include two sub-objects. This includes one that will be placed on the form row and the other will be placed on the input form control in edit mode * [PR Feedback - Combined the isLoading and isValid prop documentation examples. Removed the isValid example completely. * [PR Feedback - Remove hard coded values used for the EuiSkeletonRectangle height when isLoading is true * Update src/components/inline_edit/inline_edit_form.tsx Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> * Update src/components/inline_edit/inline_edit_form.tsx Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> * Update src/components/inline_edit/inline_edit_form.tsx Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> * Updated docs that used the editModeProps prop with EuiInlineEdit * Removed unused code block in EuiInlineEditForm * Update src-docs/src/views/inline_edit/inline_edit_example.js Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> * [PR Feedback] - Removed readModeProps from InlineEditTitle example. Allowed Prettier to format the copy on a documentation file --------- Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> * [EuiInlineEdit] Create `EuiInlineEdit` Docs (#6697) * Export the EuiInlineEdit Text and Title prop types * Created docs examples for EuiInlineEdit props * Removed an export for EuiInlineEditTextSizes as devs can drill into Title and Text props for the size * [PR Feedback] - Reorder sections of the EuiInlineEdit docs. Update the copy included in a few examples for better understanding * [Oops] Removed and replaced the EuiInlineEditTextSize import in InlineEdit Text example * Update src-docs/src/views/inline_edit/inline_edit_example.js Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> --------- Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> * [EuiInlineEdit] Test Cases for `EuiInlineEdit` (#6722) * Added Cypress tests for EuiInlineEdit functionality * Added snapshots for read mode and edit mode for the Text and Title variations for EuiInlineEdit * Use RTL render method for snapshots * [InlineEditForm] - Add data-test-subj to EuiInlineEditForm buttons and inputs - Removed opinionated save logic that prevented users from being able to save empty strings in editMode * Created test cases for EuiInlineEditForm. These test cases handle the functional and prop testing for both the Text and Title variations of the component * Updated InlineEdit Text and Title test suites to only include basic render tests and snapshots of their sizing in both readMode and editMode * Removed Cypress test in favor of testing EuiInlineEdit with Jest * Created the onSave prop that returns that latest value within EuiFieldText (in editMode) at the time the save button is clicked. * [REVERT ME] Added text to the InlineEditText example to display the use of the onSave prop * Updated onSave prop test to use the Jest mock function call instead of relying on variable value changes * [PR Feedback] Remove tests that toggled between read/edit mode in EuiInlineEdit Text and Title test suites. * [PR Feedback] - Updated the descriptions for the onSave and onConfirm props - Removed data-test-subj IDs from the loading skeleton rectangles - Updated the isLoading prop to default to false and removed explicit declarations in Text and Title * [PR Feedback] Updated EuiInlineEditForm test cases with more specific cases for onSave. Removed the isLoading default set in the props for the form as it's no longer needed * Revert "[REVERT ME] Added text to the InlineEditText example to display the use of the onSave prop" This reverts commit 6005e53. Removing modifications to docs file as they were only needed for testing * Created a new documentation example to showcase the onSave prop * Update src-docs/src/views/inline_edit/inline_edit_example.js Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> --------- Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> * [EuiInlineEdit] Refactor multiple props to harden for real-world production usage + misc cleanup (#6735) * Save example misc cleanup - remove button that clears localStorage - it's not necessary for the demo and we can do so in devtools instead - remove onConfirm doc copy - going to move that to a new section * Add support for async saving + validation - remove confusing extra `onConfirm` callback for handling everything in a single `onSave` - remove extra `onSave` prop test - just roll that behavior into the last describe block * Update documentation examples - update confirm example to more closely mimic production behavior - remove dedicated isLoading/isInvalid demo - we can demo that in the production example instead * Remove specific `ariaLabel` props in favor of generic props that can be spread to the save & cancel buttons - this is necessary for consumers to do things like reset errors on cancel, or fire telemetry events on click + remove `disabled` state of save button on `isInvalid` - but consumers can add that back in if needed via `saveButtonProps`, depending on their specific UX + minor type cleanup * Support custom `onClick` events for all button props - clicks should call both internal EUI handlers and consumer callbacks * Misc cleanup - Remove unnecessary toggle on isEditing switches which could potentially create race conditions - we know it should always be either true or false depending on the mode being entered/exited - Improve prop docs readability - make `it` vs. `test` syntax/grammar more consistent - Remove unnecessary false fallbacks - undefined is already falsy * Improve docs a bit more - react typegen is mutilating `editModeProps`, so we should more explicit in our manual prop docs - update the last docs example * PR feedback: typo Co-authored-by: Bree Hall <40739624+breehall@users.noreply.github.com> --------- Co-authored-by: Bree Hall <40739624+breehall@users.noreply.github.com> * [EuiInlineEdit] Add `onKeyDown` Mapping for Saving and Canceling Edits (#6742) * [EuiInlineEdit] Add keydown events that map the Enter and Escape keys to the save and cancel functions respectively. * [REVERT ME] Added a custom keydown event that overrides our Enter mapping as an example * [PR Feedback] Various structural updates including renaming test cases and updating logic to run both the default and custom onKeyDown methods for the edit mode input. * [PR Feedback] Remove autoFocus from both the read mode button and edit mode input in favor of manual focus management. Created a ref/useEffect combo that keeps track of the state and sets focus on the edit mode input only when the read mode button is clicked. * Add aria-describedby property to the edit mode input * Revert commit c48ee4f. * Revert 2460856 * Pull aria-describedby outside of the edit mode input form row * Update test case to validate that custom onKeyDown events work along side the default events * [EuiInlineEdit] Add Playground & Code Snippets (#6743) * [EuiInlineEdit] Create a playground for both EuiInlineEdit Text and Title * [EuiInlineEdit] Add code snippets for each InlineEdit example in the docs * Removed the inline edit validation code snippet in favor of the DemoJS because it's more helpful * Small updates to DRY util. * Added the span option to the list of headings available for EuiInlineEdit Title. * Update EuiInlineEdit Title heading prop documentation for clarity * Update src/components/inline_edit/inline_edit_title.tsx Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> --------- Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> * [EuiInlineEdit] DOM cleanup, a11y improvements, and fix breaking `onChange` bug (#6746) * DOM cleanup - Remove unnecessary `EuiForm` - we're not taking advantage of form submit behavior, so we might as well remove this - Remove unnecessary `EuiFormRow`s around save/cancel buttons - they're not inputs and don't need form rows - Remove incorrect `className={classes}` placement * Use `EuiSkeletonLoading` instead of 2 `EuiSkeletonRectangle`s - this prevents double loading screen reader announcements * Update EuiInlineEdit to only announce when state flips to loading - so that a "loaded" announcement doesn't occur whenever edit mode is opened, which doesn't make a whole lot of sense * Improve SR UX of read mode - add an `aria-describedby` that explains to screen reader users what happens when the read mode button is clicked, since the text itself is not indicative + cleanup: remove unused input ID * Fix `editModeProps.inputProps.onChange` overriding/breaking behavior * Remove `autoFocus` in favor of imperative `.focus()` calls on click - rAF is needed to wait a tick after state has changed and DOM node is available + write tests (with waitFor) asserting that focus state works as expected (mocking rAF primarily for test/function coverage) * [PR feedback] `toggle`->`activate` * Removed unneeded style file and references to it. (#6751) * Update src-docs/src/views/inline_edit/inline_edit_example.js Co-authored-by: Trevor Pierce <1Copenut@users.noreply.github.com> * Update src/components/inline_edit/inline_edit_form.tsx Co-authored-by: Trevor Pierce <1Copenut@users.noreply.github.com> * Update src-docs/src/views/inline_edit/inline_edit_example.js Co-authored-by: Trevor Pierce <1Copenut@users.noreply.github.com> * [EuiInlineEdit] `CHANGELOG` & Copy Linting (#6788) * Changelog & text linting from changes made in Github UI * Snapshot update as a result of updating the copy of the aria-describedby used by inline edit * [EuiInlineEdit] Create `isReadOnly` Prop for Read Mode (#6777) * [EuiInlineEdit] Add the isReadOnly prop that locks the component in read mode and does not allow the user to update text * [EuiInlineEdit] Update snapshots to account for new inline_edit_form styles. Added a test case for the new isReadOnly prop * [EuiInlineEdit] Forgot to add snapshot updates * [REVERT] Add documentation example to InlineEdit Text to display isReadOnly prop * Revert "[REVERT] Add documentation example to InlineEdit Text to display isReadOnly prop" This reverts commit 8a7b117. Revert change made to demo for testing * [PR Review] - Add an official example for the isReadOnly prop - Name correction in edit mode props example * [PR Feedback] - Updated the name of Emotion style object to indicate we're styling the read mode button, not the entire form - Conditionally hide the text content of aria-describedby when isReadOnly is true - Conditionally add a role (and aria-level where required) to the read mode button when isReadOnly is true * Update and add test cases * [PR Feedback] - Update conditional aria-describedby span to surround the text instead of the entire span. - Clean up logic related to adding aria-live and role attributes when isReadOnly is true * Update src-docs/src/views/inline_edit/inline_edit_read_only.tsx Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> * Update src/components/inline_edit/inline_edit_form.styles.ts Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> * [PR Feedback] -Add note in inline_edit_form.style.ts that we should reevaluate styles once EuiEmptyButton is converted to Eotion. - Updated render condition for edit mode to ensure if isReadOnly is true, we stay / kick back to read mode - Test case & snapshot updates * [PR Feedback] Move the isReadOnly prop example up in the documentation * Snapshots * Update src-docs/src/views/inline_edit/inline_edit_example.js Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> * [PR Feedback] - Removed conditiona lo logic to force a toggle from read mode to edit mode when isReadOnly is true. Opted for a useEffect that will handle the change instead * Oops! --------- Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> * Snapshots * [EuiInlineEdit] Final screen reader / a11y polish pass (#6805) * Fix conditional readonly aria-describedby - it was wrapped around the wrong SR text * Prevent double heading roles when readonly - leave role as undefined/unset otherwise, as `span` elements should not have a `heading` role * (hopefully) Fix enter screen reader behavior * Fix VO announcing EuiInlineEditText as `clickable` in read only mode * Revert "Fix VO announcing EuiInlineEditText as `clickable` in read only mode" This reverts commit 0f483bd. * NVDA browser mode fix * Revert Escape preventDefault - not actually doing anything :wompwomp: * [misc UX enhancement] Set `readOnly` on input / prevent further user editing when saving & is in `isLoading` state - docs only improvement as I don't want to tie the two props together (slightly opinionated), but hopefully consumers copy it * [mobile] Fix edit mode buttons wrapping to next line in small screens * [misc docs tweaks] - add `size` props to text/title snippets - move longer mode props snippet further down to match location on page - reorder props in demos by relative importance/requirement (or remove if not important) * Add demo section for `startWithEditOpen` prop * [misc cleanup/nits] - rename exported form styles more accurately to their usage - test name casing, + don't use camelCasing for non props --------- Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> Co-authored-by: Elizabet Oliveira <elizabet.oliveira@elastic.co> Co-authored-by: Constance Chen <constance.chen.3@gmail.com> Co-authored-by: Trevor Pierce <1Copenut@users.noreply.github.com>

breehall added 2 commits April 28, 2023 10:54

[EuiInlineEdit] Add keydown events that map the Enter and Escape keys…

1d6c644

… to the save and cancel functions respectively.

[REVERT ME] Added a custom keydown event that overrides our Enter map…

2460856

…ping as an example

breehall marked this pull request as ready for review April 28, 2023 17:20

breehall added the skip-changelog label Apr 28, 2023

breehall requested a review from cee-chen May 1, 2023 14:05

cee-chen suggested changes May 1, 2023

View reviewed changes

cee-chen reviewed May 1, 2023

View reviewed changes

1Copenut reviewed May 1, 2023

View reviewed changes

breehall added 2 commits May 1, 2023 20:08

[PR Feedback] Various structural updates including renaming test case…

192a6a7

…s and updating logic to run both the default and custom onKeyDown methods for the edit mode input.

[PR Feedback] Remove autoFocus from both the read mode button and edi…

c48ee4f

…t mode input in favor of manual focus management. Created a ref/useEffect combo that keeps track of the state and sets focus on the edit mode input only when the read mode button is clicked.

Add aria-describedby property to the edit mode input

be36a75

breehall requested a review from cee-chen May 2, 2023 17:22

Revert commit c48ee4f.

b7b5646

cee-chen reviewed May 2, 2023

View reviewed changes

src/components/inline_edit/inline_edit_form.tsx Outdated Show resolved Hide resolved

cee-chen reviewed May 2, 2023

View reviewed changes

src-docs/src/views/inline_edit/inline_edit_text.tsx Outdated Show resolved Hide resolved

cee-chen reviewed May 2, 2023

View reviewed changes

src/components/inline_edit/inline_edit_form.test.tsx Outdated Show resolved Hide resolved

cee-chen reviewed May 2, 2023

View reviewed changes

src/components/inline_edit/inline_edit_form.test.tsx Outdated Show resolved Hide resolved

breehall added 3 commits May 2, 2023 15:23

Revert 2460856

e69ca86

Pull aria-describedby outside of the edit mode input form row

9eacae4

Update test case to validate that custom onKeyDown events work along …

ea93bbd

…side the default events

cee-chen approved these changes May 2, 2023

View reviewed changes

breehall merged commit e8989de into elastic:feature/EuiInlineEdit May 2, 2023

breehall deleted the inline-edit/keydown branch October 6, 2023 16:03

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiInlineEdit] Add `onKeyDown` Mapping for Saving and Canceling Edits #6742

[EuiInlineEdit] Add `onKeyDown` Mapping for Saving and Canceling Edits #6742

breehall commented Apr 28, 2023 •

edited by cee-chen

Loading

kibanamachine commented Apr 28, 2023

cee-chen left a comment •

edited

Loading

cee-chen May 1, 2023 •

edited

Loading

1Copenut May 1, 2023

cee-chen May 1, 2023

cee-chen May 2, 2023

breehall May 2, 2023

cee-chen May 2, 2023

breehall May 2, 2023

1Copenut left a comment

1Copenut May 1, 2023

kibanamachine commented May 2, 2023

breehall commented May 2, 2023

kibanamachine commented May 2, 2023

cee-chen commented May 2, 2023

kibanamachine commented May 2, 2023

cee-chen left a comment

kibanamachine commented May 2, 2023

		@@ -184,6 +202,10 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
		isInvalid={isInvalid}

[EuiInlineEdit] Add onKeyDown Mapping for Saving and Canceling Edits #6742

[EuiInlineEdit] Add onKeyDown Mapping for Saving and Canceling Edits #6742

Conversation

breehall commented Apr 28, 2023 • edited by cee-chen Loading

Summary

QA

General checklist

kibanamachine commented Apr 28, 2023

cee-chen left a comment • edited Loading

Choose a reason for hiding this comment

cee-chen May 1, 2023 • edited Loading

Choose a reason for hiding this comment

1Copenut May 1, 2023

Choose a reason for hiding this comment

cee-chen May 1, 2023

Choose a reason for hiding this comment

cee-chen May 2, 2023

Choose a reason for hiding this comment

breehall May 2, 2023

Choose a reason for hiding this comment

cee-chen May 2, 2023

Choose a reason for hiding this comment

breehall May 2, 2023

Choose a reason for hiding this comment

1Copenut left a comment

Choose a reason for hiding this comment

1Copenut May 1, 2023

Choose a reason for hiding this comment

kibanamachine commented May 2, 2023

breehall commented May 2, 2023

kibanamachine commented May 2, 2023

cee-chen commented May 2, 2023

kibanamachine commented May 2, 2023

cee-chen left a comment

Choose a reason for hiding this comment

kibanamachine commented May 2, 2023

[EuiInlineEdit] Add `onKeyDown` Mapping for Saving and Canceling Edits #6742

[EuiInlineEdit] Add `onKeyDown` Mapping for Saving and Canceling Edits #6742

breehall commented Apr 28, 2023 •

edited by cee-chen

Loading

cee-chen left a comment •

edited

Loading

cee-chen May 1, 2023 •

edited

Loading