#1043 Support submitting colour when pressing enter key on Line input…

… field

package.json

@@ -10,7 +10,7 @@
         "@chakra-ui/react": "^2.8.2",
         "@emotion/react": "^11.11.3",
         "@emotion/styled": "^11.11.0",
-        "@railmapgen/rmg-components": "^10.0.4",
+        "@railmapgen/rmg-components": "^10.0.5",
         "@railmapgen/rmg-palette-resources": "file:package/dist",
         "@railmapgen/rmg-runtime": "^8.1.0",
         "@railmapgen/rmg-translate": "^3.1.2",

src/components/picker-view/colour-modal.test.tsx

@@ -64,7 +64,7 @@ describe('ColourModal', () => {
         expect(screen.queryByRole('combobox', { name: 'Pantone® code' })).not.toBeInTheDocument();
     });
 
-    it('Keyboard users end-to-end', async () => {
+    it('Keyboard users selecting from palette end-to-end', async () => {
         const user = userEvent.setup();
         render(<ColourModal {...mockCallbacks} />, { store: mockStore });
 
@@ -84,5 +84,8 @@ describe('ColourModal', () => {
         await user.keyboard('[ArrowDown]'); // navigate
         await user.keyboard('[Enter]'); // select
         expect(lineInput).toHaveDisplayValue('Customise');
+
+        await user.keyboard('[Enter]'); // submit
+        expect(mockCallbacks.onSubmit).toBeCalledTimes(1);
     });
 });

src/components/picker-view/colour-modal.tsx

@@ -109,6 +109,16 @@ export default function ColourModal(props: ColourModalProps) {
         { label: t('White'), value: MonoColour.white },
     ];
 
+    const isSubmitEnabled = cityCode && lineCode && bgColour && fgColour && hexValidator(bgColour);
+
+    const handleSubmit = () => {
+        if (isSubmitEnabled) {
+            // FIXME
+            const displayName = `${cityCode} - ${lineCode}`;
+            onSubmit?.([cityCode, lineCode, bgColour, fgColour], displayName);
+        }
+    };
+
     const paletteFields: RmgFieldsField[] = [
         {
             type: 'custom',
@@ -138,6 +148,7 @@ export default function ColourModal(props: ColourModalProps) {
                         setFgColour(fg);
                         pantone && setPantoneCode(pantone);
                     }}
+                    onSubmit={handleSubmit}
                 />
             ),
         },
@@ -203,16 +214,6 @@ export default function ColourModal(props: ColourModalProps) {
         },
     ];
 
-    const isSubmitEnabled = cityCode && lineCode && bgColour && fgColour && hexValidator(bgColour);
-
-    const handleSubmit = () => {
-        if (isSubmitEnabled) {
-            // FIXME
-            const displayName = `${cityCode} - ${lineCode}`;
-            onSubmit?.([cityCode, lineCode, bgColour, fgColour], displayName);
-        }
-    };
-
     const handleApply = (theme: Theme) => {
         setCityCode(theme[0]);
         setLineCode(theme[1]);

src/components/picker-view/colour-picker.tsx

@@ -7,10 +7,11 @@ interface ColourPickerProps {
     city?: string;
     defaultValueId?: string;
     onChange?: (lineCode: string, bg: ColourHex, fg: MonoColour, pantone?: string) => void;
+    onSubmit?: () => void;
 }
 
 export default function ColourPicker(props: ColourPickerProps) {
-    const { city, defaultValueId, onChange } = props;
+    const { city, defaultValueId, onChange, onSubmit } = props;
 
     const translateName = useTranslatedName();
 
@@ -39,6 +40,9 @@ export default function ColourPicker(props: ColourPickerProps) {
             filter={filter}
             value={currentItem && translateName(currentItem.name)}
             onChange={item => onChange?.(item.id, item.colour, item.fg || MonoColour.white, item.pantone)}
+            InputPropsByState={isOpen => ({
+                onKeyDown: ({ key }) => !isOpen && key === 'Enter' && onSubmit?.(),
+            })}
         />
     );
 }