fix: Fixed bug with removing the first element. Also disabled remove button if there is only 1 element left

Author: kevinwang5658

src/Button.tsx

@@ -5,15 +5,22 @@ export function Button(props: {
   label: string;
   onClicked?: () => void;
   id?: string;
+  isEnabled?: boolean;
 }) {
-  const { isFocused } = useFocus(props.id ? { id: props.id } : {});
+  const isEnabled = props.isEnabled ?? true;
+  const { isFocused } = useFocus({ ...(props.id ? { id: props.id } : {}), isActive: props.isEnabled });
+
   useInput((input, key) => {
+    if (!isEnabled) {
+      return;
+    }
+
     if (key.return && isFocused) {
       props.onClicked?.();
     }
   });
 
-  return <Box marginX={2} paddingX={1} borderStyle="round" borderColor={isFocused ? 'blue' : 'magenta'}>
+  return <Box marginX={2} paddingX={1} borderStyle="round" borderColor={!isEnabled ? 'gray' : isFocused ? 'blue' : 'magenta'}>
     <Box flexGrow={1}>
       <Text underline={isFocused} color={isFocused ? 'blue' : undefined}>
         {props.label}

src/Form.tsx

@@ -94,7 +94,7 @@ export const Form: React.FC<FormProps> = props => {
     { isActive: !editingField }
   );
 
-  const duplicateCurrentItem = () => {
+  const duplicateCurrentSection = () => {
     const newTabs = [...sections]
     newTabs.splice(currentTab + 1, 0, sections[currentTab])
 
@@ -105,14 +105,14 @@ export const Form: React.FC<FormProps> = props => {
     setValue([...value]);
   }
 
-  const removeCurrentItem = () => {
+  const removeCurrentSection = () => {
     const newTabs = [...sections]
     newTabs.splice(currentTab, 1);
     value.splice(currentTab, 1)
 
     setSections(newTabs);
     setValue([...value]);
-    onChangeTab(currentTab - 1)
+    onChangeTab(Math.max(currentTab - 1, 0))
   }
 
   return (
@@ -154,10 +154,10 @@ export const Form: React.FC<FormProps> = props => {
               <Text>{' }'}</Text>
             )}
             <Box flexDirection="row-reverse">
-              <Button label="Add (duplicate)" id={'addButton'} onClicked={() => duplicateCurrentItem()}/>
+              <Button label="Add (duplicate)" id={'addButton'} onClicked={() => duplicateCurrentSection()}/>
             </Box>
             <Box flexDirection="row-reverse">
-              <Button label="Remove" id={'removeButton'} onClicked={() => removeCurrentItem()}/>
+              <Button label="Remove" id={'removeButton'} isEnabled={sections.length > 1} onClicked={() => removeCurrentSection()}/>
             </Box>
           </Box>
           {!editingField && (