feat(handle): Add `blurUnselectDisabled` property to disable unselecting handle on blur. #8483

driskull · 2023-12-22T00:31:21Z

Related Issue: #8485

Summary

Adds blurUnselectDisabled property
This is needed so that the element is not deactivated after blur when moving an item via keyboard.
Adds test for functionality

driskull · 2023-12-27T20:00:44Z

@benelan can you review this one?

macandcheese

🏆 Nice! Just a couple nitpick / q's.

macandcheese · 2023-12-28T01:32:27Z

packages/calcite-components/src/components/handle/handle.tsx

+   *
+   * @internal
+   */
+  @Prop() blurUnselectDisabled = false;


Is there a way to tie this name to activated, or would that not be accurate? Just a nitpick as its an internal prop, but its a bit confusing if unfamiliar with the component.

I was thinking that but I think the next step is going to be renaming active to selected and making it public.

macandcheese · 2023-12-28T01:33:21Z

packages/calcite-components/src/components/handle/handle.e2e.ts

@@ -37,6 +37,51 @@ describe("calcite-handle", () => {
    expect(await handle.getProperty("activated")).toBe(true);
  });

+  it("sets activated to false when blurred", async () => {


Does this fix any behavior in list or another consuming component? If so, is it worth adding a check there? Disregard if not the case.

…8484) **Related Issue:** #8522 ## Summary - depends on #8483 - Renames `activated` property to `selected` to align with other components - Makes `selected` public - Adds public event `calciteHandleChange` for when `selected` is changed via user - Renames internal event `calciteInternalHandleChange` to `calciteInternalAssistiveTextChange` to better illustrate its purpose - adds tests

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-design-tokens: 2.1.1</summary> ## [2.1.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-design-tokens@2.1.0...@esri/calcite-design-tokens@2.1.1) (2024-01-17) ### Bug Fixes * Allow users to control tabindex on interactive components ([#8166](#8166)) ([b15c052](b15c052)) ### Reverts * Chore(modal): remove e2e tests that are covered by dedicated openClose commonTests helper ([#8392](#8392)) ([#8471](#8471)) ([4bedf99](4bedf99)) </details> <details><summary>@esri/calcite-components: 2.2.0</summary> ## [2.2.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.1.0...@esri/calcite-components@2.2.0) (2024-01-17) ### Features * **action-menu:** Close menu on blur instead of on tab key. ([#8577](#8577)) ([ccfbd0c](ccfbd0c)) * **checkbox, combobox, input-date-picker, input-time-picker, segmented-control, select:** Add required property ([#8517](#8517)) ([72a1ce4](72a1ce4)) * **handle, block, list-item:** Improve drag handle tooltip to include item label ([#8584](#8584)) ([6e643e2](6e643e2)) * **handle:** Add `blurUnselectDisabled` property to disable unselecting handle on blur. ([#8483](#8483)) ([4d665cc](4d665cc)) * **handle:** Add selected property and calciteHandleChange event. ([#8484](#8484)) ([d2e9880](d2e9880)) * **list-item:** Add dragSelected property and calciteListItemDragHandleChange event ([#8524](#8524)) ([4db2eb7](4db2eb7)) * **list-item:** Add tooltip for expanding and collapsing ([#8612](#8612)) ([4964491](4964491)) * **list:** Add "filter-no-results" slot to display content when no filtered items are shown ([#8569](#8569)) ([f1fc7f6](f1fc7f6)) * **list:** Introduce clearer unselected state ([#8510](#8510)) ([f1e836c](f1e836c)) * **radio-button-group, segmented control:** Add validationMessage, validationIcon, and status properties ([#8561](#8561)) ([d4c5efc](d4c5efc)) * Reflect validationIcon property ([#8583](#8583)) ([b3d38b3](b3d38b3)) * **table-header:** Add style when within a `selected` Table Row ([#8449](#8449)) ([13cfe75](13cfe75)) * **tabs:** Emit selection-related events when selection is modified after closing the selected tab ([#8582](#8582)) ([b15c940](b15c940)) * **tile:** Add visual scales ([#8496](#8496)) ([7638ec4](7638ec4)) * Use input-message to display validation messages for invalid fields after form submission ([#8574](#8574)) ([fd392fe](fd392fe)) ### Bug Fixes * **action:** Update component tokens to support transparent ([#8532](#8532)) ([81cb5cc](81cb5cc)) * Allow users to control tabindex on interactive components ([#8166](#8166)) ([b15c052](b15c052)) * **button:** Avoid needlessly overwriting title ([#8491](#8491)) ([350a983](350a983)) * **color-picker:** Emit color change when nudging color channels by using the shift key ([#8579](#8579)) ([4250598](4250598)) * **combobox:** Only allow deleting visible chips with the keyboard ([#8603](#8603)) ([2d38241](2d38241)) * **date-picker:** Prevent console error when selecting just an end date for input date picker ([#8444](#8444)) ([c0e51c3](c0e51c3)) * **filter:** Prevent console warning from displaying to end users ([#8458](#8458)) ([0de7646](0de7646)) * **input-date-picker:** Ensure range icon toggles open corresponding date-picker ([#8554](#8554)) ([cfafd15](cfafd15)) * **input-date-picker:** Resolve a hard to reproduce number formatter caching issue that occurred due to the countdown delay in queued Alerts. ([5f4fa3e](5f4fa3e)) * **input-message:** Add missing margin to scale="s", spacing CSS variable has effect ([#8592](#8592)) ([49b0a20](49b0a20)) * **input, input-number, input-text:** Restore focus on input after browser validation error is displayed and user continues typing ([#8563](#8563)) ([5897965](5897965)) * **input, input-number:** Support setting value property to Infinity ([#8547](#8547)) ([f6ac698](f6ac698)) * **list-item:** Store last focused cell from focusing on elements within a cell. ([#8494](#8494)) ([28f93b4](28f93b4)) * **list, list-item, list-item-group:** Honor hidden attribute on list-item and list-item-group ([#8541](#8541)) ([3851dc6](3851dc6)) * **list:** Correct selectedItems value when list is filtered ([#8481](#8481)) ([9de1922](9de1922)) * **list:** Fix event detail newIndex when down arrow pressed to sort ([#8462](#8462)) ([b3d5169](b3d5169)) * **list:** Fix keyboard arrow navigation ([#8470](#8470)) ([57fdaa4](57fdaa4)) * **modal:** Ensure focus trapping in dynamically created, subsequently opened modals ([#8593](#8593)) ([4ec6b94](4ec6b94)) * **table:** Fix double border on `bordered` Table Rows in `table-footer` ([#8509](#8509)) ([c16ea33](c16ea33)) * **table:** Improve Table overflow behavior ([#8424](#8424)) ([79743e1](79743e1)) * **text-area:** Prevent infinite render loop when `max-length` property is defined ([#8610](#8610)) ([f30d933](f30d933)) ### Reverts * Chore(modal): remove e2e tests that are covered by dedicated openClose commonTests helper ([#8392](#8392)) ([#8471](#8471)) ([4bedf99](4bedf99)) ### Dependencies * The following workspace dependencies were updated * devDependencies * @esri/calcite-design-tokens bumped from ^2.1.1-next.4 to ^2.1.1 </details> <details><summary>@esri/calcite-components-angular: 2.2.0</summary> ## [2.2.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.1.0...@esri/calcite-components-angular@2.2.0) (2024-01-17) ### Miscellaneous Chores * **@esri/calcite-components-angular:** Synchronize undefined versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^2.2.0-next.22 to ^2.2.0 </details> <details><summary>@esri/calcite-components-react: 2.2.0</summary> ## [2.2.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.1.0...@esri/calcite-components-react@2.2.0) (2024-01-17) ### Miscellaneous Chores * **@esri/calcite-components-react:** Synchronize undefined versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^2.2.0-next.22 to ^2.2.0 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

driskull added 2 commits December 21, 2023 16:15

fix(list): disable unselecting drag handle when reordering via keyboard.

c35b0c1

cleanup components file

085381f

github-actions bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Dec 22, 2023

github-actions bot assigned driskull Dec 22, 2023

driskull added the skip visual snapshots Pull requests that do not need visual regression testing. label Dec 22, 2023

driskull added 3 commits December 21, 2023 16:54

cleanup

447836b

cleanup

4f6f728

add test

375ee22

driskull changed the title ~~fix(list): disable unselecting drag handle when reordering via keyboard.~~ feat(handle): Add blurDisabled property to disable unselecting handle on blur. Dec 22, 2023

driskull mentioned this pull request Dec 22, 2023

feat(handle): add selected property and calciteHandleChange event. #8484

Merged

driskull marked this pull request as ready for review December 22, 2023 01:20

driskull requested a review from a team as a code owner December 22, 2023 01:20

rename prop

f3e5a01

github-actions bot added the enhancement Issues tied to a new feature or request. label Dec 23, 2023

driskull changed the title ~~feat(handle): Add blurDisabled property to disable unselecting handle on blur.~~ feat(handle): Add blurUnselectDisabled property to disable unselecting handle on blur. Dec 23, 2023

fix test

0bf5e34

Merge branch 'main' into dris0000/list-keyboard-drag-fix-focus

59ce46a

driskull requested review from macandcheese and benelan December 28, 2023 01:22

macandcheese approved these changes Dec 28, 2023

View reviewed changes

driskull merged commit 4d665cc into main Dec 28, 2023
10 checks passed

driskull deleted the dris0000/list-keyboard-drag-fix-focus branch December 28, 2023 06:31

github-actions bot added this to the 2024 January Priorities - Main release milestone Dec 28, 2023

calcite-admin mentioned this pull request Dec 28, 2023

chore: release main #8455

Merged

calcite-admin mentioned this pull request May 14, 2024

chore: release main #9237

Merged

calcite-admin mentioned this pull request May 28, 2024

chore: release hotfix #9438

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(handle): Add `blurUnselectDisabled` property to disable unselecting handle on blur. #8483

feat(handle): Add `blurUnselectDisabled` property to disable unselecting handle on blur. #8483

driskull commented Dec 22, 2023 •

edited

Loading

driskull commented Dec 27, 2023

macandcheese left a comment

macandcheese Dec 28, 2023

driskull Dec 28, 2023

macandcheese Dec 28, 2023

feat(handle): Add blurUnselectDisabled property to disable unselecting handle on blur. #8483

feat(handle): Add blurUnselectDisabled property to disable unselecting handle on blur. #8483

Conversation

driskull commented Dec 22, 2023 • edited Loading

Summary

driskull commented Dec 27, 2023

macandcheese left a comment

Choose a reason for hiding this comment

macandcheese Dec 28, 2023

Choose a reason for hiding this comment

driskull Dec 28, 2023

Choose a reason for hiding this comment

macandcheese Dec 28, 2023

Choose a reason for hiding this comment

feat(handle): Add `blurUnselectDisabled` property to disable unselecting handle on blur. #8483

feat(handle): Add `blurUnselectDisabled` property to disable unselecting handle on blur. #8483

driskull commented Dec 22, 2023 •

edited

Loading