fix(core): fix menu bugs (#8074)

packages/frontend/component/src/ui/editable/inline-edit.stories.tsx

@@ -57,7 +57,6 @@ Basic.args = {
   editable: true,
   placeholder: 'Untitled',
   trigger: 'doubleClick',
-  autoSelect: true,
 };
 
 export const CustomizeText: StoryFn<typeof InlineEdit> =
@@ -104,7 +103,6 @@ export const TriggerEdit: StoryFn<typeof InlineEdit> = args => {
 TriggerEdit.args = {
   value: 'Trigger edit mode in parent component by `handleRef`',
   editable: true,
-  autoSelect: true,
 };
 
 export const UpdateValue: StoryFn<typeof InlineEdit> = args => {
@@ -137,5 +135,4 @@ export const UpdateValue: StoryFn<typeof InlineEdit> = args => {
 UpdateValue.args = {
   value: 'Update value in parent component by `value`',
   editable: true,
-  autoSelect: true,
 };

packages/frontend/component/src/ui/editable/inline-edit.tsx

@@ -46,11 +46,6 @@ export interface InlineEditProps
    */
   trigger?: 'click' | 'doubleClick';
 
-  /**
-   * whether to auto select all text when trigger edit
-   */
-  autoSelect?: boolean;
-
   /**
    * Placeholder when value is empty
    */
@@ -79,7 +74,6 @@ export const InlineEdit = ({
   className,
   style,
   trigger = 'doubleClick',
-  autoSelect,
 
   onInput,
   onChange,
@@ -104,11 +98,7 @@ export const InlineEdit = ({
   const triggerEdit = useCallback(() => {
     if (!editable) return;
     setEditing(true);
-    setTimeout(() => {
-      inputRef.current?.focus();
-      autoSelect && inputRef.current?.select();
-    }, 0);
-  }, [autoSelect, editable]);
+  }, [editable]);
 
   const onDoubleClick = useCallback(() => {
     if (trigger !== 'doubleClick') return;
@@ -208,7 +198,7 @@ export const InlineEdit = ({
       </div>
 
       {/* actual input */}
-      {
+      {editing && (
         <Input
           ref={inputRef}
           className={styles.inlineEditInput}
@@ -220,9 +210,11 @@ export const InlineEdit = ({
           style={inputWrapperInheritsStyles}
           inputStyle={inputInheritsStyles}
           onBlur={onBlur}
+          autoFocus
+          autoSelect
           {...inputAttrs}
         />
-      }
+      )}
     </div>
   );
 };