feat: add tab-index in select

libs/components/editor-core/src/block-pendant/pendant-modify-panel/IconInput.tsx

@@ -1,4 +1,4 @@
-import React, { type CSSProperties, useState } from 'react';
+import React, { forwardRef, type CSSProperties, useState } from 'react';
 import { Input, styled, InputProps } from '@toeverything/components/ui';
 import { StyledHighLightWrapper } from '../StyledComponent';
 import { IconNames } from '../types';
@@ -29,38 +29,39 @@ export const PendantIcon = ({
     );
 };
 
-export const IconInput = ({
-    iconName,
-    iconStyle,
-    color,
-    background,
-    ...inputProps
-}: IconInputProps) => {
-    return (
-        <>
-            <PendantIcon
-                iconName={iconName}
-                iconStyle={iconStyle}
-                color={color}
-                background={background}
-            />
-            <Input
-                style={{
-                    flexGrow: '1',
-                    border: 'none',
-                }}
-                {...inputProps}
-            />
-        </>
-    );
-};
+export const IconInput = forwardRef<HTMLInputElement, IconInputProps>(
+    ({ iconName, iconStyle, color, background, ...inputProps }, ref) => {
+        return (
+            <>
+                <PendantIcon
+                    iconName={iconName}
+                    iconStyle={iconStyle}
+                    color={color}
+                    background={background}
+                />
+                <Input
+                    ref={ref}
+                    style={{
+                        flexGrow: '1',
+                    }}
+                    noBorder
+                    {...inputProps}
+                />
+            </>
+        );
+    }
+);
 
 type HighLightIconInputProps = {
     startElement?: React.ReactNode;
     endElement?: React.ReactNode;
+    tabIndex?: number;
 } & IconInputProps;
 
-export const HighLightIconInput = (props: HighLightIconInputProps) => {
+export const HighLightIconInput = forwardRef<
+    HTMLInputElement,
+    HighLightIconInputProps
+>((props, ref) => {
     const {
         onFocus,
         onBlur,
@@ -74,6 +75,7 @@ export const HighLightIconInput = (props: HighLightIconInputProps) => {
         <StyledHighLightWrapper isFocus={focus}>
             {startElement}
             <IconInput
+                ref={ref}
                 onFocus={e => {
                     setFocus(true);
                     onFocus?.(e);
@@ -87,7 +89,7 @@ export const HighLightIconInput = (props: HighLightIconInputProps) => {
             {endElement}
         </StyledHighLightWrapper>
     );
-};
+});
 
 const StyledIconWrapper = styled('div')`
     display: inline-flex;

libs/components/editor-core/src/block-pendant/pendant-modify-panel/Select.tsx

@@ -5,7 +5,7 @@ import React, {
     KeyboardEvent,
     useRef,
 } from 'react';
-import { Add, Delete, Close } from '@mui/icons-material';
+import { Add, Close } from '@mui/icons-material';
 import { ModifyPanelContentProps } from './types';
 import {
     MultiSelectProperty,
@@ -38,6 +38,7 @@ type OptionItemType = {
     };
     onEnter?: (e: KeyboardEvent) => void;
     focused?: boolean;
+    tabIndex?: number;
 };
 
 type SelectPropsType = {
@@ -138,6 +139,7 @@ export const BasicSelect = ({
                         onEnter={() => {
                             insertOption(options[options.length - 1].id);
                         }}
+                        tabIndex={index + 1}
                     />
                 );
             })}
@@ -196,6 +198,7 @@ const OptionItem = ({
     iconConfig,
     onEnter,
     focused,
+    tabIndex,
 }: OptionItemType) => {
     const theme = useTheme();
     const inputRef = useRef<HTMLInputElement>();
@@ -204,11 +207,8 @@ const OptionItem = ({
     }, [focused]);
     return (
         <HighLightIconInput
-            componentsProps={{
-                input: {
-                    ref: inputRef,
-                },
-            }}
+            tabIndex={tabIndex}
+            ref={inputRef}
             iconName={iconConfig?.name}
             color={iconConfig?.color}
             background={iconConfig?.background}

libs/components/editor-core/src/block-pendant/pendant-modify-panel/Text.tsx

@@ -8,7 +8,7 @@ export default ({
     initialValue,
     iconConfig,
 }: ModifyPanelContentProps) => {
-    const [text, setText] = useState(initialValue?.value || '');
+    const [text, setText] = useState((initialValue?.value as string) || '');
     return (
         <HighLightIconInput
             iconName={iconConfig?.iconName}