[duoyun-ui] Fixed <dy-keyboard-access>

mantou132 · Jan 19, 2024 · 823b2a1 · 823b2a1
1 parent 8ec8fd9
commit 823b2a1
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 14 deletions.
diff --git a/packages/duoyun-ui/src/elements/color-picker.ts b/packages/duoyun-ui/src/elements/color-picker.ts
@@ -18,7 +18,6 @@ import { commonHandle } from '../lib/hotkeys';
 import { focusStyle } from '../lib/styles';
 
 import type { BasePickerElement } from './picker';
-import type { DuoyunPopoverElement } from './popover';
 
 import './popover';
 import './color-panel';
@@ -64,7 +63,7 @@ const style = createCSSSheet(css`
 export class DuoyunColorPickerElement extends GemElement implements BasePickerElement {
   @attribute value: HexColor;
   @boolattribute alpha: boolean;
-  @refobject popoverRef: RefObject<DuoyunPopoverElement>;
+  @refobject divRef: RefObject<HTMLDivElement>;
   @boolattribute disabled: boolean;
 
   @globalemitter change: Emitter<HexColor>;
@@ -77,7 +76,6 @@ export class DuoyunColorPickerElement extends GemElement implements BasePickerEl
     return html`
       <dy-popover
         trigger="click"
-        ref=${this.popoverRef.ref}
         .disabled=${this.disabled}
         .content=${html`
           <dy-color-panel
@@ -90,6 +88,7 @@ export class DuoyunColorPickerElement extends GemElement implements BasePickerEl
       >
         <div
           role="combobox"
+          ref=${this.divRef.ref}
           tabindex=${-Number(this.disabled)}
           aria-disabled=${this.disabled}
           @keydown=${commonHandle}
@@ -101,6 +100,6 @@ export class DuoyunColorPickerElement extends GemElement implements BasePickerEl
   };
 
   showPicker() {
-    this.popoverRef.element?.click();
+    this.divRef.element?.click();
   }
 }
diff --git a/packages/duoyun-ui/src/elements/file-picker.ts b/packages/duoyun-ui/src/elements/file-picker.ts
@@ -219,7 +219,7 @@ export class DuoyunFilePickerElement extends GemElement implements BasePickerEle
     const renderItem = this.#type === 'file' ? this.#renderFileItem : this.#renderImageItem;
 
     return html`
-    <input
+      <input
         hidden
         type="file"
         ?multiple=${this.multiple}

diff --git a/packages/duoyun-ui/src/elements/input.ts b/packages/duoyun-ui/src/elements/input.ts
@@ -282,17 +282,25 @@ export class DuoyunInputElement extends GemElement {
     this.#inputHandle();
   };
 
-  #onClear = (evt: Event) => {
+  #onClear = async (evt: Event) => {
     evt.stopPropagation();
     this.clear('');
-    this.focus();
     this.#history.save();
+    // click handle 之后会聚焦到 target 上
+    await Promise.resolve();
+    this.focus();
   };
 
   #history = new InputHistory(this);
 
   #onKeyDown = (evt: KeyboardEvent) => {
     const nextValue = (n: number) => String(clamp(this.#min, Number(this.value || this.min) + n, this.#max));
+    hotkeys({
+      esc: () => {
+        // Chrome： 当在 search 输入框上 esc 时，会触发输入为 '' 的事件
+        // 这里组织默认处理
+      },
+    })(evt);
     if (this.type === 'number') {
       hotkeys(
         {

diff --git a/packages/duoyun-ui/src/elements/keyboard-access.ts b/packages/duoyun-ui/src/elements/keyboard-access.ts
@@ -150,12 +150,9 @@ export class DuoyunKeyboardAccessElement extends GemElement<State> {
           // `a-b`
           keydownHandles[[...key].join('-')] = () => {
             this.setState({ active: false });
-            if ('showPicker' in element) {
-              (element as HTMLInputElement).showPicker();
-            } else {
-              element.focus();
-              element.click();
-            }
+            // BasePickerElement 的 `showPicker` 一样支持通过 `click` 触发
+            element.focus();
+            element.click();
           };
           index++;
           return { key, top, left };

diff --git a/packages/duoyun-ui/src/elements/shortcut-record.ts b/packages/duoyun-ui/src/elements/shortcut-record.ts
@@ -137,7 +137,7 @@ export class DuoyunShortcutRecordElement extends GemElement {
 
   #onClear = () => {
     this.clear(null);
-    this.focus();
+    // 由于 target 不能聚集，所以会自动聚焦到 this 上
   };
 
   render = () => {

diff --git a/packages/duoyun-ui/src/patterns/table.ts b/packages/duoyun-ui/src/patterns/table.ts
@@ -35,6 +35,7 @@ import type { DuoyunButtonElement } from '../elements/button';
 import { locale } from '../lib/locale';
 import { icons } from '../lib/icons';
 import { isNotBoolean } from '../lib/types';
+import { hotkeys } from '../lib/hotkeys';
 
 import { locationStore } from './console';
 import type { FilterableOptions, FilterableType } from './filter-form';
@@ -289,6 +290,15 @@ export class DyPatTableElement<T = any> extends GemElement<State> {
     evt.stopPropagation();
   };
 
+  #onKeydown = (evt: KeyboardEvent) => {
+    hotkeys({
+      esc: () => {
+        this.setState({ search: '' });
+        this.#changeQueryThrottle();
+      },
+    })(evt);
+  };
+
   #onAddFilter = (data: Filter) => {
     ContextMenu.close();
     this.setState({ filters: [...this.state.filters, data] });
@@ -435,6 +445,7 @@ export class DyPatTableElement<T = any> extends GemElement<State> {
           clearable
           @clear=${this.#onSearch}
           @change=${this.#onSearch}
+          @keydown=${this.#onKeydown}
           .value=${this.state.search}
         ></dy-input>
         ${this.filterable