frontend: updated NumberComponent

- ignoring F1 and F12 keys, as well
- emitting parent_path, as well
- changing Form.Control readOnly -> disabled
- only show buttons when Form isn't read only

frontend/src/components/NumberComponent.tsx

@@ -134,7 +134,13 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
   };
   const handleKeyDown = (event) => {
     const { key, target } = event;
-    if (key === 'F5' || key === 'ArrowRight' || key === 'ArrowLeft') {
+    if (
+      key === 'F1' ||
+      key === 'F5' ||
+      key === 'F12' ||
+      key === 'ArrowRight' ||
+      key === 'ArrowLeft'
+    ) {
       return;
     }
     event.preventDefault();
@@ -189,6 +195,7 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
     // Update the input value and maintain the cursor position
     socket.emit('frontend_update', {
       name: name,
+      parent_path: parent_path,
       value: Number(newValue)
     });
 
@@ -209,11 +216,12 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
             <Form.Control
               type="text"
               value={value}
-              readOnly={readOnly}
+              disabled={readOnly}
               name={name}
               onKeyDown={handleKeyDown}
             />
           </InputGroup>
+          {!readOnly && (
             <div className="d-flex flex-column">
               <Button
                 style={{ padding: '0.2em 6px', fontSize: '0.70rem' }}
@@ -227,6 +235,7 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
                 -
               </Button>
             </div>
+          )}
         </div>
       </div>
     </div>