Focus the added field

questdb · Oct 16, 2023 · 8a9d6fb · 8a9d6fb
1 parent 9679d81
commit 8a9d6fb
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 13 deletions.
diff --git a/packages/web-console/src/components/TableSchemaDialog/actions.tsx b/packages/web-console/src/components/TableSchemaDialog/actions.tsx
@@ -13,10 +13,12 @@ export const Actions = ({
   action,
   ctaText,
   lastFocusedIndex,
+  onAdded,
 }: {
   action: Action
   ctaText: string
   lastFocusedIndex?: number
+  onAdded: (index: number) => void
 }) => {
   const newEntry = {
     name: "",
@@ -63,17 +65,19 @@ export const Actions = ({
       <PopperHover
         trigger={
           <Button
-            disabled={watchSchemaColumns.length === 0}
+            disabled={
+              watchSchemaColumns.length === 0 || lastFocusedIndex === undefined
+            }
             skin="secondary"
             type="button"
-            onClick={() =>
-              insert(
+            onClick={() => {
+              const index =
                 lastFocusedIndex !== undefined
                   ? lastFocusedIndex
-                  : watchSchemaColumns.length,
-                newEntry,
-              )
-            }
+                  : watchSchemaColumns.length
+              insert(index, newEntry)
+              onAdded(index)
+            }}
           >
             <InsertRowTop size="20px" />
           </Button>
@@ -92,14 +96,14 @@ export const Actions = ({
           <Button
             skin="secondary"
             type="button"
-            onClick={() =>
-              insert(
+            onClick={() => {
+              const index =
                 lastFocusedIndex !== undefined
                   ? lastFocusedIndex + 1
-                  : watchSchemaColumns.length,
-                newEntry,
-              )
-            }
+                  : watchSchemaColumns.length
+              insert(index, newEntry)
+              onAdded(index)
+            }}
           >
             <InsertRowBottom size="20px" />
           </Button>

diff --git a/packages/web-console/src/components/TableSchemaDialog/column.tsx b/packages/web-console/src/components/TableSchemaDialog/column.tsx
@@ -62,6 +62,7 @@ export const Column = ({
   onSetTimestamp,
   onFocus,
   timestamp,
+  lastFocusedIndex,
 }: {
   action: Action
   disabled: boolean
@@ -70,6 +71,7 @@ export const Column = ({
   onSetTimestamp: (name: string) => void
   onFocus: (index: number) => void
   timestamp: string
+  lastFocusedIndex?: number
 }) => {
   const [name, setName] = useState(column.name)
 
@@ -99,6 +101,7 @@ export const Column = ({
               name={`schemaColumns.${index}.name`}
               autoComplete="off"
               required
+              {...(lastFocusedIndex === index && { autoFocus: true })}
             />
           </Form.Item>
 

diff --git a/packages/web-console/src/components/TableSchemaDialog/columns.tsx b/packages/web-console/src/components/TableSchemaDialog/columns.tsx
@@ -39,10 +39,12 @@ export const Columns = ({
   action,
   isEditLocked,
   onColumnFocus,
+  lastFocusedIndex,
 }: {
   action: Action
   isEditLocked: boolean
   onColumnFocus: (index: number) => void
+  lastFocusedIndex?: number
 }) => {
   const { formState, getValues, setValue, watch } = useFormContext()
 
@@ -60,6 +62,7 @@ export const Columns = ({
             column={column}
             disabled={isEditLocked}
             index={index}
+            lastFocusedIndex={lastFocusedIndex}
             onFocus={onColumnFocus}
             onSetTimestamp={(name) => {
               setValue("timestamp", watchTimestamp === name ? "" : name)

diff --git a/packages/web-console/src/components/TableSchemaDialog/dialog.tsx b/packages/web-console/src/components/TableSchemaDialog/dialog.tsx
@@ -215,6 +215,7 @@ export const Dialog = ({
                 ctaText={ctaText}
                 action={action}
                 lastFocusedIndex={lastFocusedIndex}
+                onAdded={setLastFocusedIndex}
               />
             }
           />
@@ -326,6 +327,7 @@ export const Dialog = ({
                 action={action}
                 isEditLocked={isEditLocked}
                 onColumnFocus={setLastFocusedIndex}
+                lastFocusedIndex={lastFocusedIndex}
               />
             </Inputs>
           </Items>