From a8a10f9159e015ebf527be92837e8a89941375de Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Thu, 8 Dec 2022 18:22:14 -0800 Subject: [PATCH 01/11] refactor(radio-group): use delegatesFocus --- src/components/radio-group/radio-group.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/radio-group/radio-group.tsx b/src/components/radio-group/radio-group.tsx index bcd763eed2e..8a2cac74232 100644 --- a/src/components/radio-group/radio-group.tsx +++ b/src/components/radio-group/radio-group.tsx @@ -38,7 +38,9 @@ import { @Component({ tag: "calcite-radio-group", styleUrl: "radio-group.scss", - shadow: true + shadow: { + delegatesFocus: true + } }) export class RadioGroup implements LabelableComponent, FormComponent, InteractiveComponent, LoadableComponent @@ -262,8 +264,7 @@ export class RadioGroup @Method() async setFocus(): Promise { await componentLoaded(this); - - (this.selectedItem || this.getItems()[0])?.focus(); + this.el.focus(); } //-------------------------------------------------------------------------- @@ -285,7 +286,7 @@ export class RadioGroup //-------------------------------------------------------------------------- onLabelClick(): void { - this.setFocus(); + this.el.focus(); } private getItems(): NodeListOf { From 1d5ae35a1fa82798f760dda04e0b68aaf6acbd6f Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Thu, 8 Dec 2022 18:46:02 -0800 Subject: [PATCH 02/11] refactor(color-picker): use delegatesFocus --- src/components/color-picker/color-picker.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/color-picker/color-picker.tsx b/src/components/color-picker/color-picker.tsx index de633309f92..815162adc5c 100644 --- a/src/components/color-picker/color-picker.tsx +++ b/src/components/color-picker/color-picker.tsx @@ -23,7 +23,7 @@ import { HSV_LIMITS, RGB_LIMITS } from "./resources"; -import { Direction, focusElement, getElementDir, isPrimaryPointerButton } from "../../utils/dom"; +import { Direction, getElementDir, isPrimaryPointerButton } from "../../utils/dom"; import { colorEqual, CSSColorMode, Format, normalizeHex, parseMode, SupportedMode } from "./utils"; import { throttle } from "lodash-es"; @@ -54,7 +54,9 @@ const defaultFormat = "auto"; @Component({ tag: "calcite-color-picker", styleUrl: "color-picker.scss", - shadow: true, + shadow: { + delegatesFocus: true + }, assetsDirs: ["assets"] }) export class ColorPicker @@ -795,8 +797,7 @@ export class ColorPicker @Method() async setFocus(): Promise { await componentLoaded(this); - - return focusElement(this.colorFieldScopeNode); + this.el.focus(); } //-------------------------------------------------------------------------- From b24404a8e9dc3cd70875daf99e9585338d046442 Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Thu, 8 Dec 2022 18:55:37 -0800 Subject: [PATCH 03/11] refactor(input-date-picker, date-picker): use delegatesFocus --- src/components/date-picker/date-picker.tsx | 4 +++- src/components/input-date-picker/input-date-picker.tsx | 7 ++++--- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/date-picker/date-picker.tsx b/src/components/date-picker/date-picker.tsx index 3b20d47a5a7..9da27021ba0 100644 --- a/src/components/date-picker/date-picker.tsx +++ b/src/components/date-picker/date-picker.tsx @@ -42,7 +42,9 @@ import { assetsDirs: ["assets"], tag: "calcite-date-picker", styleUrl: "date-picker.scss", - shadow: true + shadow: { + delegatesFocus: true + } }) export class DatePicker implements LocalizedComponent, T9nComponent { //-------------------------------------------------------------------------- diff --git a/src/components/input-date-picker/input-date-picker.tsx b/src/components/input-date-picker/input-date-picker.tsx index 0b4e85c6652..648be453e2c 100644 --- a/src/components/input-date-picker/input-date-picker.tsx +++ b/src/components/input-date-picker/input-date-picker.tsx @@ -73,7 +73,9 @@ import { @Component({ tag: "calcite-input-date-picker", styleUrl: "input-date-picker.scss", - shadow: true + shadow: { + delegatesFocus: true + } }) export class InputDatePicker implements @@ -416,8 +418,7 @@ export class InputDatePicker @Method() async setFocus(): Promise { await componentLoaded(this); - - this.startInput?.setFocus(); + this.el.focus(); } /** From d874d5991709d6a3a8f40dd34977db012af9efa3 Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Thu, 8 Dec 2022 21:54:02 -0800 Subject: [PATCH 04/11] refactor(time-picker, input-time-picker): use delegatesFocus --- src/components/input-time-picker/input-time-picker.tsx | 6 ++++-- src/components/time-picker/time-picker.tsx | 4 +++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/input-time-picker/input-time-picker.tsx b/src/components/input-time-picker/input-time-picker.tsx index 8080c852a75..e284ba17832 100644 --- a/src/components/input-time-picker/input-time-picker.tsx +++ b/src/components/input-time-picker/input-time-picker.tsx @@ -45,7 +45,9 @@ import { @Component({ tag: "calcite-input-time-picker", styleUrl: "input-time-picker.scss", - shadow: true + shadow: { + delegatesFocus: true + } }) export class InputTimePicker implements @@ -419,7 +421,7 @@ export class InputTimePicker async setFocus(): Promise { await componentLoaded(this); - this.calciteInputEl?.setFocus(); + this.el.focus(); } /** diff --git a/src/components/time-picker/time-picker.tsx b/src/components/time-picker/time-picker.tsx index 3f1c6da3aa1..167bf3daa29 100644 --- a/src/components/time-picker/time-picker.tsx +++ b/src/components/time-picker/time-picker.tsx @@ -60,7 +60,9 @@ function capitalize(str: string): string { @Component({ tag: "calcite-time-picker", styleUrl: "time-picker.scss", - shadow: true, + shadow: { + delegatesFocus: true + }, assetsDirs: ["assets"] }) export class TimePicker From 733563675051d0ab920a2ecb65c151ece365c0c3 Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Wed, 14 Dec 2022 20:53:34 -0800 Subject: [PATCH 05/11] refactor(action-bar,action-pad,action-group)!: use delegatesFocus --- src/components/action-bar/action-bar.e2e.ts | 3 +-- src/components/action-bar/action-bar.tsx | 15 +++++---------- src/components/action-group/action-group.tsx | 4 +++- src/components/action-pad/action-pad.e2e.ts | 3 +-- src/components/action-pad/action-pad.tsx | 15 +++++---------- 5 files changed, 15 insertions(+), 25 deletions(-) diff --git a/src/components/action-bar/action-bar.e2e.ts b/src/components/action-bar/action-bar.e2e.ts index 40ea4e00e6b..1e9a9cbdb81 100755 --- a/src/components/action-bar/action-bar.e2e.ts +++ b/src/components/action-bar/action-bar.e2e.ts @@ -236,8 +236,7 @@ describe("calcite-action-bar", () => { `, { - focusId: "expand-toggle", - focusTargetSelector: "calcite-action-bar" + focusTargetSelector: "calcite-action" } )); diff --git a/src/components/action-bar/action-bar.tsx b/src/components/action-bar/action-bar.tsx index 458dc3fdca4..4c8f484d85e 100755 --- a/src/components/action-bar/action-bar.tsx +++ b/src/components/action-bar/action-bar.tsx @@ -14,7 +14,7 @@ import { import { Position, Scale, Layout } from "../interfaces"; import { ExpandToggle, toggleChildActionText } from "../functional/ExpandToggle"; import { CSS, SLOTS } from "./resources"; -import { getSlotted, focusElement } from "../../utils/dom"; +import { getSlotted } from "../../utils/dom"; import { geActionDimensions, getOverflowCount, @@ -53,7 +53,9 @@ import { @Component({ tag: "calcite-action-bar", styleUrl: "action-bar.scss", - shadow: true, + shadow: { + delegatesFocus: true + }, assetsDirs: ["assets"] }) export class ActionBar @@ -243,18 +245,11 @@ export class ActionBar /** * Sets focus on the component. - * - * @param focusId */ @Method() - async setFocus(focusId?: "expand-toggle"): Promise { + async setFocus(): Promise { await componentLoaded(this); - if (focusId === "expand-toggle") { - await focusElement(this.expandToggleEl); - return; - } - this.el?.focus(); } diff --git a/src/components/action-group/action-group.tsx b/src/components/action-group/action-group.tsx index 217c6c2ea7f..37f3f052b3b 100755 --- a/src/components/action-group/action-group.tsx +++ b/src/components/action-group/action-group.tsx @@ -28,7 +28,9 @@ import { Messages } from "./assets/action-group/t9n"; @Component({ tag: "calcite-action-group", styleUrl: "action-group.scss", - shadow: true, + shadow: { + delegatesFocus: true + }, assetsDirs: ["assets"] }) export class ActionGroup implements ConditionalSlotComponent, LocalizedComponent, T9nComponent { diff --git a/src/components/action-pad/action-pad.e2e.ts b/src/components/action-pad/action-pad.e2e.ts index 255494717ea..6ff9e07523e 100755 --- a/src/components/action-pad/action-pad.e2e.ts +++ b/src/components/action-pad/action-pad.e2e.ts @@ -192,8 +192,7 @@ describe("calcite-action-pad", () => { `, { - focusId: "expand-toggle", - focusTargetSelector: "calcite-action-pad" + focusTargetSelector: "calcite-action" } )); diff --git a/src/components/action-pad/action-pad.tsx b/src/components/action-pad/action-pad.tsx index f9ba78db640..39f83cb5428 100755 --- a/src/components/action-pad/action-pad.tsx +++ b/src/components/action-pad/action-pad.tsx @@ -13,7 +13,7 @@ import { } from "@stencil/core"; import { Layout, Position, Scale } from "../interfaces"; import { ExpandToggle, toggleChildActionText } from "../functional/ExpandToggle"; -import { focusElement, getSlotted } from "../../utils/dom"; +import { getSlotted } from "../../utils/dom"; import { CSS, SLOTS } from "./resources"; import { ConditionalSlotComponent, @@ -43,7 +43,9 @@ import { @Component({ tag: "calcite-action-pad", styleUrl: "action-pad.scss", - shadow: true, + shadow: { + delegatesFocus: true + }, assetsDirs: ["assets"] }) export class ActionPad @@ -185,18 +187,11 @@ export class ActionPad /** * Sets focus on the component. - * - * @param focusId */ @Method() - async setFocus(focusId?: "expand-toggle"): Promise { + async setFocus(): Promise { await componentLoaded(this); - if (focusId === "expand-toggle") { - await focusElement(this.expandToggleEl); - return; - } - this.el?.focus(); } From 31ead8be1cafe5f657698875adc8dbcc39e99b68 Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Wed, 14 Dec 2022 22:19:06 -0800 Subject: [PATCH 06/11] refactor(filter): use delegatesFocus --- src/components/filter/filter.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/filter/filter.tsx b/src/components/filter/filter.tsx index 38195ef413c..09af471fe1c 100644 --- a/src/components/filter/filter.tsx +++ b/src/components/filter/filter.tsx @@ -14,7 +14,6 @@ import { import { debounce } from "lodash-es"; import { CSS, DEBOUNCE_TIMEOUT, ICONS } from "./resources"; import { Scale } from "../interfaces"; -import { focusElement } from "../../utils/dom"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; import { filter } from "../../utils/filter"; import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; @@ -36,7 +35,9 @@ import { @Component({ tag: "calcite-filter", styleUrl: "filter.scss", - shadow: true, + shadow: { + delegatesFocus: true + }, assetsDirs: ["assets"] }) export class Filter @@ -200,7 +201,7 @@ export class Filter async setFocus(): Promise { await componentLoaded(this); - focusElement(this.textInput); + this.el?.focus(); } // -------------------------------------------------------------------------- From 3b8e16cdcd785963826fbf0c8fc37be31092d2c9 Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Wed, 14 Dec 2022 22:31:04 -0800 Subject: [PATCH 07/11] refactor(split-button): use delegatesFocus --- src/components/split-button/split-button.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/split-button/split-button.tsx b/src/components/split-button/split-button.tsx index 31475e10a87..479ffba93a0 100644 --- a/src/components/split-button/split-button.tsx +++ b/src/components/split-button/split-button.tsx @@ -11,7 +11,9 @@ import { InteractiveComponent, updateHostInteraction } from "../../utils/interac @Component({ tag: "calcite-split-button", styleUrl: "split-button.scss", - shadow: true + shadow: { + delegatesFocus: true + } }) export class SplitButton implements InteractiveComponent { @Element() el: HTMLCalciteSplitButtonElement; From 049941c755de034f04bed1180f7ad0047fd1d4c7 Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Wed, 14 Dec 2022 23:34:30 -0800 Subject: [PATCH 08/11] refactor(dropdown, dropdown-group): use delegatesFocus() --- src/components/dropdown-group/dropdown-group.tsx | 4 +++- src/components/dropdown/dropdown.tsx | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/dropdown-group/dropdown-group.tsx b/src/components/dropdown-group/dropdown-group.tsx index 8ec96c32a68..c17c70c2fdc 100644 --- a/src/components/dropdown-group/dropdown-group.tsx +++ b/src/components/dropdown-group/dropdown-group.tsx @@ -20,7 +20,9 @@ import { CSS } from "./resources"; @Component({ tag: "calcite-dropdown-group", styleUrl: "dropdown-group.scss", - shadow: true + shadow: { + delegatesFocus: true + } }) export class DropdownGroup { //-------------------------------------------------------------------------- diff --git a/src/components/dropdown/dropdown.tsx b/src/components/dropdown/dropdown.tsx index bae63559d17..f70dc3a7cf8 100644 --- a/src/components/dropdown/dropdown.tsx +++ b/src/components/dropdown/dropdown.tsx @@ -47,7 +47,9 @@ import { isActivationKey } from "../../utils/key"; @Component({ tag: "calcite-dropdown", styleUrl: "dropdown.scss", - shadow: true + shadow: { + delegatesFocus: true + } }) export class Dropdown implements InteractiveComponent, OpenCloseComponent, FloatingUIComponent { //-------------------------------------------------------------------------- From 0e0e1f999dd05293f838e162aa2a21c88de83acf Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Wed, 14 Dec 2022 23:35:13 -0800 Subject: [PATCH 09/11] refactor(slider,pagination,radio-button-group,inline-editable): use delegatesFocus --- src/components/inline-editable/inline-editable.tsx | 10 ++++------ src/components/pagination/pagination.tsx | 4 +++- .../radio-button-group/radio-button-group.tsx | 4 +++- src/components/slider/slider.tsx | 4 +++- 4 files changed, 13 insertions(+), 9 deletions(-) diff --git a/src/components/inline-editable/inline-editable.tsx b/src/components/inline-editable/inline-editable.tsx index edb8e7d4ad6..95f9e959bc7 100644 --- a/src/components/inline-editable/inline-editable.tsx +++ b/src/components/inline-editable/inline-editable.tsx @@ -38,7 +38,9 @@ import { */ @Component({ tag: "calcite-inline-editable", - shadow: true, + shadow: { + delegatesFocus: true + }, styleUrl: "inline-editable.scss", assetsDirs: ["assets"] }) @@ -318,11 +320,7 @@ export class InlineEditable async setFocus(): Promise { await componentLoaded(this); - if (this.editingEnabled) { - this.inputElement?.setFocus(); - } else { - this.enableEditingButton?.setFocus(); - } + this.el?.focus(); } //-------------------------------------------------------------------------- diff --git a/src/components/pagination/pagination.tsx b/src/components/pagination/pagination.tsx index 38cc8fa0b23..b741379ab0f 100644 --- a/src/components/pagination/pagination.tsx +++ b/src/components/pagination/pagination.tsx @@ -39,7 +39,9 @@ export interface PaginationDetail { @Component({ tag: "calcite-pagination", styleUrl: "pagination.scss", - shadow: true, + shadow: { + delegatesFocus: true + }, assetsDirs: ["assets"] }) export class Pagination implements LocalizedComponent, LocalizedComponent, T9nComponent { diff --git a/src/components/radio-button-group/radio-button-group.tsx b/src/components/radio-button-group/radio-button-group.tsx index 7aee065eee2..fa04cf6636c 100644 --- a/src/components/radio-button-group/radio-button-group.tsx +++ b/src/components/radio-button-group/radio-button-group.tsx @@ -19,7 +19,9 @@ import { Layout, Scale } from "../interfaces"; @Component({ tag: "calcite-radio-button-group", styleUrl: "radio-button-group.scss", - shadow: true + shadow: { + delegatesFocus: true + } }) export class RadioButtonGroup { //-------------------------------------------------------------------------- diff --git a/src/components/slider/slider.tsx b/src/components/slider/slider.tsx index 9b23a70db9f..e12b31312f6 100644 --- a/src/components/slider/slider.tsx +++ b/src/components/slider/slider.tsx @@ -53,7 +53,9 @@ function isRange(value: number | number[]): value is number[] { @Component({ tag: "calcite-slider", styleUrl: "slider.scss", - shadow: true + shadow: { + delegatesFocus: true + } }) export class Slider implements From a3c81585f9e2851e8e4f52d0bc013b1610181719 Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Thu, 15 Dec 2022 00:51:10 -0800 Subject: [PATCH 10/11] Revert "refactor(radio-group): use delegatesFocus" This reverts commit a8a10f9159e015ebf527be92837e8a89941375de. --- src/components/radio-group/radio-group.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/radio-group/radio-group.tsx b/src/components/radio-group/radio-group.tsx index 8a2cac74232..bcd763eed2e 100644 --- a/src/components/radio-group/radio-group.tsx +++ b/src/components/radio-group/radio-group.tsx @@ -38,9 +38,7 @@ import { @Component({ tag: "calcite-radio-group", styleUrl: "radio-group.scss", - shadow: { - delegatesFocus: true - } + shadow: true }) export class RadioGroup implements LabelableComponent, FormComponent, InteractiveComponent, LoadableComponent @@ -264,7 +262,8 @@ export class RadioGroup @Method() async setFocus(): Promise { await componentLoaded(this); - this.el.focus(); + + (this.selectedItem || this.getItems()[0])?.focus(); } //-------------------------------------------------------------------------- @@ -286,7 +285,7 @@ export class RadioGroup //-------------------------------------------------------------------------- onLabelClick(): void { - this.el.focus(); + this.setFocus(); } private getItems(): NodeListOf { From df5db96b43ef4bf0499880743c126c411d7d5fff Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Thu, 15 Dec 2022 12:45:35 -0800 Subject: [PATCH 11/11] test(input-date-picker): one less tab needed due to focus delegation --- src/components/input-date-picker/input-date-picker.e2e.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/input-date-picker/input-date-picker.e2e.ts b/src/components/input-date-picker/input-date-picker.e2e.ts index 55ab27d61cb..bb2a79eb85d 100644 --- a/src/components/input-date-picker/input-date-picker.e2e.ts +++ b/src/components/input-date-picker/input-date-picker.e2e.ts @@ -428,8 +428,6 @@ describe("calcite-input-date-picker", () => { await page.waitForChanges(); await page.keyboard.press("Tab"); await page.waitForChanges(); - await page.keyboard.press("Tab"); - await page.waitForChanges(); await datepickerEl.type("08/30/2022"); await page.keyboard.press("Enter"); await page.waitForChanges();