[docs] Fix Joy UI variables playground (mui#35950)

mnajdova · Jan 30, 2023 · 3c2a491 · 3c2a491
1 parent 64e83d5
commit 3c2a491
Showing 1 changed file with 12 additions and 16 deletions.
diff --git a/docs/src/modules/components/JoyVariablesDemo.tsx b/docs/src/modules/components/JoyVariablesDemo.tsx
@@ -72,6 +72,7 @@ function SlotVariables({ slot, data, renderField, defaultOpen = false }: SlotVar
             display: 'flex',
             flexWrap: 'wrap',
             gap: 2,
+            '& > *': { flex: 1 },
           }}
         >
           {data.map((item) => renderField(item))}
@@ -179,21 +180,7 @@ export default function JoyVariablesDemo(props: {
                       variant="outlined"
                       value={Number(`${resolvedValue}`?.replace('px', '')) || ''}
                       slotProps={{
-                        input: {
-                          onKeyDown: (event) => {
-                            if (
-                              (event.ctrlKey || event.metaKey) &&
-                              event.key.toLowerCase() === 'z'
-                            ) {
-                              setSx((prevSx) => {
-                                const newSx = { ...prevSx };
-                                delete newSx[item.var];
-                                return newSx;
-                              });
-                            }
-                          },
-                          ...resolvedInputAttributes,
-                        },
+                        input: { ...resolvedInputAttributes },
                       }}
                       endDecorator={
                         <React.Fragment>
@@ -222,6 +209,15 @@ export default function JoyVariablesDemo(props: {
                         </React.Fragment>
                       }
                       type="number"
+                      onKeyDown={(event) => {
+                        if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'z') {
+                          setSx((prevSx) => {
+                            const newSx = { ...prevSx };
+                            delete newSx[item.var];
+                            return newSx;
+                          });
+                        }
+                      }}
                       onChange={(event) => {
                         const { value } = event.target;
                         setSx((prevSx) => {
@@ -234,7 +230,7 @@ export default function JoyVariablesDemo(props: {
                           return {
                             ...prevSx,
                             [item.var]:
-                              typeof resolvedValue === 'string' ? `${value}px` : Number(value),
+                              typeof resolvedValue === 'number' ? Number(value) : `${value}px`,
                           };
                         });
                       }}