From 04ef9c9663fa1c57f4b55de3173f6ded47dd8a8b Mon Sep 17 00:00:00 2001
From: liaoxuezhi <2698393+2betop@users.noreply.github.com>
Date: Mon, 6 Jan 2025 20:12:20 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20quickEdit=20focus?=
 =?UTF-8?q?=20=E9=AB=98=E4=BA=AE=E4=B8=8E=E5=88=97=E5=86=BB=E7=BB=93?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=86=B2=E7=AA=81=E9=97=AE=E9=A2=98=E5=B9=B6?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=BF=AB=E9=80=9F=E7=BC=96=E8=BE=91=E9=94=AE?=
 =?UTF-8?q?=E7=9B=98=E6=93=8D=E4=BD=9C=E4=BA=A4=E4=BA=92=20(#11382)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/amis-core/src/renderers/Form.tsx     | 18 ++++---
 .../amis-core/src/utils/uncontrollable.tsx    |  2 +-
 .../amis-ui/scss/components/_quick-edit.scss  |  2 +-
 packages/amis-ui/src/components/Button.tsx    |  3 ++
 packages/amis-ui/src/components/Select.tsx    | 13 ++---
 .../__snapshots__/inputTable.test.tsx.snap    | 30 ++++++++----
 .../Form/__snapshots__/static.test.tsx.snap   |  1 +
 .../__snapshots__/CRUD.test.tsx.snap          | 10 ++++
 packages/amis/src/renderers/Action.tsx        |  6 ++-
 packages/amis/src/renderers/QuickEdit.tsx     | 47 +++++++++++++------
 10 files changed, 92 insertions(+), 40 deletions(-)

diff --git a/packages/amis-core/src/renderers/Form.tsx b/packages/amis-core/src/renderers/Form.tsx
index fffd297cfba..a8900b06783 100644
--- a/packages/amis-core/src/renderers/Form.tsx
+++ b/packages/amis-core/src/renderers/Form.tsx
@@ -2335,13 +2335,7 @@ export class FormRendererBase extends Form {
     super.componentDidMount();
 
     if (this.props.autoFocus) {
-      const scoped = this.context as IScopedContext;
-      const inputs = scoped.getComponents();
-      let focuableInput = find(
-        inputs,
-        input => input.focus
-      ) as ScopedComponentType;
-      focuableInput && setTimeout(() => focuableInput.focus!(), 200);
+      this.focus();
     }
   }
 
@@ -2352,6 +2346,16 @@ export class FormRendererBase extends Form {
     super.componentWillUnmount();
   }
 
+  focus() {
+    const scoped = this.context as IScopedContext;
+    const inputs = scoped.getComponents();
+    let focuableInput = find(
+      inputs,
+      input => input.focus
+    ) as ScopedComponentType;
+    focuableInput && setTimeout(() => focuableInput.focus!(), 200);
+  }
+
   doAction(
     action: ActionObject,
     data: object = this.props.store.data,
diff --git a/packages/amis-core/src/utils/uncontrollable.tsx b/packages/amis-core/src/utils/uncontrollable.tsx
index 82e67ae65d9..23f93fe44b6 100644
--- a/packages/amis-core/src/utils/uncontrollable.tsx
+++ b/packages/amis-core/src/utils/uncontrollable.tsx
@@ -6,7 +6,7 @@ export function uncontrollable<
   P extends {
     [propName: string]: any;
   }
->(arg: T, config: P, mapping?: any): T {
+>(arg: T, config: P, mapping?: Array<string>): T {
   const result = baseuncontrollable(arg, config, mapping);
   return hoistNonReactStatic(result, arg);
 }
diff --git a/packages/amis-ui/scss/components/_quick-edit.scss b/packages/amis-ui/scss/components/_quick-edit.scss
index 708f9197129..fe26a24f5f2 100644
--- a/packages/amis-ui/scss/components/_quick-edit.scss
+++ b/packages/amis-ui/scss/components/_quick-edit.scss
@@ -23,7 +23,7 @@
   &:focus {
     position: relative;
 
-    &:after {
+    &:before {
       content: '';
       left: 0;
       top: 0;
diff --git a/packages/amis-ui/src/components/Button.tsx b/packages/amis-ui/src/components/Button.tsx
index 6428b450d51..550b829a4c8 100644
--- a/packages/amis-ui/src/components/Button.tsx
+++ b/packages/amis-ui/src/components/Button.tsx
@@ -33,6 +33,7 @@ export interface ButtonProps
   classPrefix: string;
   classnames: ClassNamesFn;
   componentClass: React.ElementType;
+  tabIndex?: string;
   overrideClassName?: boolean;
   loading?: boolean;
   loadingClassName?: string;
@@ -79,6 +80,7 @@ export class Button extends React.Component<ButtonProps> {
       overrideClassName,
       loadingConfig,
       testIdBuilder,
+      tabIndex,
       ...rest
     } = this.props;
 
@@ -112,6 +114,7 @@ export class Button extends React.Component<ButtonProps> {
         style={style}
         title={title}
         disabled={disabled}
+        tabIndex={tabIndex}
       >
         {loading && !disabled && (
           <Spinner
diff --git a/packages/amis-ui/src/components/Select.tsx b/packages/amis-ui/src/components/Select.tsx
index a1e5ef158b9..1c1ae927758 100644
--- a/packages/amis-ui/src/components/Select.tsx
+++ b/packages/amis-ui/src/components/Select.tsx
@@ -1427,12 +1427,13 @@ export class Select extends React.Component<SelectProps, SelectState> {
   }
 }
 
-const EnhancedSelect = themeable(
-  localeable(
-    uncontrollable(Select, {
-      value: 'onChange'
-    })
-  )
+const methods = ['focus', 'blur'];
+const EnhancedSelect = uncontrollable(
+  themeable(localeable(Select, methods), methods),
+  {
+    value: 'onChange'
+  },
+  methods
 );
 
 export default EnhancedSelect;
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/inputTable.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/inputTable.test.tsx.snap
index 32bac504bd2..424bcae90e5 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/inputTable.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/inputTable.test.tsx.snap
@@ -438,7 +438,8 @@ exports[`Renderer:input table add 1`] = `
                         data-index="0"
                       >
                         <td
-                          class=""
+                          class="cxd-Field--quickEditable"
+                          tabindex="0"
                         >
                           <div
                             class="cxd-Form-item cxd-Form-item--normal"
@@ -465,7 +466,8 @@ exports[`Renderer:input table add 1`] = `
                           </div>
                         </td>
                         <td
-                          class=""
+                          class="cxd-Field--quickEditable"
+                          tabindex="0"
                         >
                           <div
                             class="cxd-Form-item cxd-Form-item--normal"
@@ -689,7 +691,8 @@ exports[`Renderer:input-table cell selects delete 1`] = `
                         data-index="0"
                       >
                         <td
-                          class=""
+                          class="cxd-Field--quickEditable"
+                          tabindex="0"
                         >
                           <div
                             class="cxd-Form-item cxd-Form-item--normal"
@@ -1039,7 +1042,8 @@ exports[`Renderer:input-table init display 1`] = `
                         data-index="0"
                       >
                         <td
-                          class=""
+                          class="cxd-Field--quickEditable"
+                          tabindex="0"
                         >
                           <div
                             class="cxd-Form-item cxd-Form-item--normal"
@@ -1066,7 +1070,8 @@ exports[`Renderer:input-table init display 1`] = `
                           </div>
                         </td>
                         <td
-                          class=""
+                          class="cxd-Field--quickEditable"
+                          tabindex="0"
                         >
                           <div
                             class="cxd-Form-item cxd-Form-item--normal"
@@ -1178,7 +1183,8 @@ exports[`Renderer:input-table init display 1`] = `
                           </div>
                         </td>
                         <td
-                          class=""
+                          class="cxd-Field--quickEditable"
+                          tabindex="0"
                         >
                           <div
                             class="cxd-Form-item cxd-Form-item--normal"
@@ -1243,7 +1249,8 @@ exports[`Renderer:input-table init display 1`] = `
                         data-index="1"
                       >
                         <td
-                          class=""
+                          class="cxd-Field--quickEditable"
+                          tabindex="0"
                         >
                           <div
                             class="cxd-Form-item cxd-Form-item--normal"
@@ -1270,7 +1277,8 @@ exports[`Renderer:input-table init display 1`] = `
                           </div>
                         </td>
                         <td
-                          class=""
+                          class="cxd-Field--quickEditable"
+                          tabindex="0"
                         >
                           <div
                             class="cxd-Form-item cxd-Form-item--normal"
@@ -1382,7 +1390,8 @@ exports[`Renderer:input-table init display 1`] = `
                           </div>
                         </td>
                         <td
-                          class=""
+                          class="cxd-Field--quickEditable"
+                          tabindex="0"
                         >
                           <div
                             class="cxd-Form-item cxd-Form-item--normal"
@@ -1632,7 +1641,8 @@ exports[`Renderer:input-table with combo column 1`] = `
                         data-index="0"
                       >
                         <td
-                          class=""
+                          class="cxd-Field--quickEditable"
+                          tabindex="0"
                         >
                           <div
                             class="cxd-Form-item cxd-Form-item--normal"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/static.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/static.test.tsx.snap
index 1b5afb95588..aa65877129a 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/static.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/static.test.tsx.snap
@@ -156,6 +156,7 @@ exports[`Renderer:static-quickEdit-icon 1`] = `
         </span>
         <button
           class="cxd-Button cxd-Button--link cxd-Button--size-default cxd-Field-quickEditBtn"
+          tabindex="-1"
           type="button"
         >
           <i
diff --git a/packages/amis/__tests__/renderers/__snapshots__/CRUD.test.tsx.snap b/packages/amis/__tests__/renderers/__snapshots__/CRUD.test.tsx.snap
index 5582c0ebc4c..8a58e8b555b 100644
--- a/packages/amis/__tests__/renderers/__snapshots__/CRUD.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/__snapshots__/CRUD.test.tsx.snap
@@ -2951,6 +2951,7 @@ exports[`13. enderer: crud keepItemSelectionOnPageChange & maxKeepItemSelectionL
                           </span>
                           <button
                             class="cxd-Button cxd-Button--link cxd-Button--size-default cxd-Field-quickEditBtn"
+                            tabindex="-1"
                             type="button"
                           >
                             <icon-mock
@@ -3006,6 +3007,7 @@ exports[`13. enderer: crud keepItemSelectionOnPageChange & maxKeepItemSelectionL
                           </span>
                           <button
                             class="cxd-Button cxd-Button--link cxd-Button--size-default cxd-Field-quickEditBtn"
+                            tabindex="-1"
                             type="button"
                           >
                             <icon-mock
@@ -3061,6 +3063,7 @@ exports[`13. enderer: crud keepItemSelectionOnPageChange & maxKeepItemSelectionL
                           </span>
                           <button
                             class="cxd-Button cxd-Button--link cxd-Button--size-default cxd-Field-quickEditBtn"
+                            tabindex="-1"
                             type="button"
                           >
                             <icon-mock
@@ -3116,6 +3119,7 @@ exports[`13. enderer: crud keepItemSelectionOnPageChange & maxKeepItemSelectionL
                           </span>
                           <button
                             class="cxd-Button cxd-Button--link cxd-Button--size-default cxd-Field-quickEditBtn"
+                            tabindex="-1"
                             type="button"
                           >
                             <icon-mock
@@ -3172,6 +3176,7 @@ exports[`13. enderer: crud keepItemSelectionOnPageChange & maxKeepItemSelectionL
                           </span>
                           <button
                             class="cxd-Button cxd-Button--link cxd-Button--size-default cxd-Field-quickEditBtn"
+                            tabindex="-1"
                             type="button"
                           >
                             <icon-mock
@@ -3228,6 +3233,7 @@ exports[`13. enderer: crud keepItemSelectionOnPageChange & maxKeepItemSelectionL
                           </span>
                           <button
                             class="cxd-Button cxd-Button--link cxd-Button--size-default cxd-Field-quickEditBtn"
+                            tabindex="-1"
                             type="button"
                           >
                             <icon-mock
@@ -3284,6 +3290,7 @@ exports[`13. enderer: crud keepItemSelectionOnPageChange & maxKeepItemSelectionL
                           </span>
                           <button
                             class="cxd-Button cxd-Button--link cxd-Button--size-default cxd-Field-quickEditBtn"
+                            tabindex="-1"
                             type="button"
                           >
                             <icon-mock
@@ -3340,6 +3347,7 @@ exports[`13. enderer: crud keepItemSelectionOnPageChange & maxKeepItemSelectionL
                           </span>
                           <button
                             class="cxd-Button cxd-Button--link cxd-Button--size-default cxd-Field-quickEditBtn"
+                            tabindex="-1"
                             type="button"
                           >
                             <icon-mock
@@ -3396,6 +3404,7 @@ exports[`13. enderer: crud keepItemSelectionOnPageChange & maxKeepItemSelectionL
                           </span>
                           <button
                             class="cxd-Button cxd-Button--link cxd-Button--size-default cxd-Field-quickEditBtn"
+                            tabindex="-1"
                             type="button"
                           >
                             <icon-mock
@@ -3452,6 +3461,7 @@ exports[`13. enderer: crud keepItemSelectionOnPageChange & maxKeepItemSelectionL
                           </span>
                           <button
                             class="cxd-Button cxd-Button--link cxd-Button--size-default cxd-Field-quickEditBtn"
+                            tabindex="-1"
                             type="button"
                           >
                             <icon-mock
diff --git a/packages/amis/src/renderers/Action.tsx b/packages/amis/src/renderers/Action.tsx
index 4e14302494a..c8d349d9369 100644
--- a/packages/amis/src/renderers/Action.tsx
+++ b/packages/amis/src/renderers/Action.tsx
@@ -173,6 +173,8 @@ export interface ButtonSchema extends BaseSchema {
    * 子内容
    */
   body?: SchemaCollection;
+
+  tabIndex?: string;
 }
 
 export interface AjaxActionSchema extends ButtonSchema {
@@ -751,7 +753,8 @@ export class Action extends React.Component<ActionProps, ActionState> {
       css,
       id,
       testIdBuilder,
-      env
+      env,
+      tabIndex
     } = this.props;
 
     if (actionType !== 'email' && body) {
@@ -883,6 +886,7 @@ export class Action extends React.Component<ActionProps, ActionState> {
           tooltipRootClose={tooltipRootClose}
           block={block}
           iconOnly={!!(icon && !label && level !== 'link')}
+          tabIndex={tabIndex}
         >
           {!loading ? iconElement : ''}
           {label ? <span>{filter(String(label), data)}</span> : null}
diff --git a/packages/amis/src/renderers/QuickEdit.tsx b/packages/amis/src/renderers/QuickEdit.tsx
index 4869461b30e..bbdf82b8b3a 100644
--- a/packages/amis/src/renderers/QuickEdit.tsx
+++ b/packages/amis/src/renderers/QuickEdit.tsx
@@ -124,6 +124,8 @@ export const HocQuickEdit =
     > {
       target: HTMLElement;
       overlay: HTMLElement;
+      form?: any;
+      formItem?: any;
       static ComposedComponent = Component;
       constructor(props: QuickEditProps) {
         super(props);
@@ -163,24 +165,22 @@ export const HocQuickEdit =
       formRef(ref: any) {
         const {quickEditFormRef, rowIndex, colIndex} = this.props;
 
-        if (quickEditFormRef) {
-          while (ref && ref.getWrappedInstance) {
-            ref = ref.getWrappedInstance();
-          }
-
-          quickEditFormRef(ref, colIndex, rowIndex);
+        while (ref && ref.getWrappedInstance) {
+          ref = ref.getWrappedInstance();
         }
+
+        this.form = ref;
+        quickEditFormRef?.(ref, colIndex, rowIndex);
       }
       formItemRef(ref: any) {
         const {quickEditFormItemRef, rowIndex, colIndex} = this.props;
 
-        if (quickEditFormItemRef) {
-          while (ref && ref.getWrappedInstance) {
-            ref = ref.getWrappedInstance();
-          }
-
-          quickEditFormItemRef(ref, colIndex, rowIndex);
+        while (ref && ref.getWrappedInstance) {
+          ref = ref.getWrappedInstance();
         }
+
+        this.formItem = ref;
+        quickEditFormItemRef?.(ref, colIndex, rowIndex);
       }
 
       handleWindowKeyPress(e: Event) {
@@ -525,7 +525,14 @@ export const HocQuickEdit =
         ) {
           e.preventDefault();
           e.stopPropagation();
-          this.openQuickEdit();
+
+          if (this.formItem) {
+            this.formItem?.focus?.();
+          } else if (this.form) {
+            this.form?.focus?.();
+          } else {
+            this.openQuickEdit();
+          }
         }
       }
 
@@ -677,7 +684,18 @@ export const HocQuickEdit =
           (quickEdit as QuickEditConfig).isFormMode
         ) {
           return (
-            <Component {...restProps}>{this.renderInlineForm()}</Component>
+            <Component
+              {...restProps}
+              className={cx(`Field--quickEditable`, className)}
+              tabIndex={
+                (quickEdit as QuickEditConfig).focusable === false
+                  ? undefined
+                  : '0'
+              }
+              onKeyUp={disabled ? noop : this.handleKeyUp}
+            >
+              {this.renderInlineForm()}
+            </Component>
           );
         } else {
           return (
@@ -698,6 +716,7 @@ export const HocQuickEdit =
                 ? null
                 : render('quick-edit-button', {
                     type: 'button',
+                    tabIndex: '-1',
                     onClick: this.openQuickEdit,
                     className: 'Field-quickEditBtn',
                     icon: (quickEdit as QuickEditConfig).icon || 'edit',