#596 - Fix for number field in block data

CHANGELOG.md

@@ -29,6 +29,7 @@
 - [#577](https://github.com/estruyf/vscode-front-matter/issues/577): Fix in the `dataFile` field where data entries get overwritten
 - [#590](https://github.com/estruyf/vscode-front-matter/issues/590): Fix for image fields inside a sub-block
 - [#595](https://github.com/estruyf/vscode-front-matter/issues/595): Fix for media metadata now showing up
+- [#596](https://github.com/estruyf/vscode-front-matter/issues/596): Fix for number field in block data
 
 ## [8.4.0] - 2023-04-03 - [Release notes](https://beta.frontmatter.codes/updates/v8.4.0)
 

src/panelWebView/components/DataBlock/DataBlockField.tsx

@@ -333,7 +333,7 @@ export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({
           </div>
         </div>
       ) : (
-        <button title={`Add ${field.name}`} onClick={onShowForm}>
+        <button title={`Add ${field.name} `} onClick={onShowForm}>
           Add {field.name}
         </button>
       )}

src/panelWebView/components/Fields/NumberField.tsx

@@ -20,7 +20,7 @@ export const NumberField: React.FunctionComponent<INumberFieldProps> = ({
 }: React.PropsWithChildren<INumberFieldProps>) => {
   const [nrValue, setNrValue] = React.useState<number | null>(value);
 
-  const onValueChange = useCallback((txtValue: string) => {
+  const onValueChange = (txtValue: string) => {
     let newValue: number | null = options?.isDecimal ? parseFloat(txtValue) : parseInt(txtValue);
     if (isNaN(newValue)) {
       newValue = null;
@@ -28,7 +28,7 @@ export const NumberField: React.FunctionComponent<INumberFieldProps> = ({
 
     setNrValue(newValue);
     onChange(newValue);
-  }, [options?.isDecimal]);
+  };
 
   const showRequiredState = useMemo(() => {
     return required && (nrValue === null || nrValue === undefined);

src/panelWebView/components/Fields/TextField.tsx

@@ -28,7 +28,7 @@ export const TextField: React.FunctionComponent<ITextFieldProps> = ({
   onChange,
   required
 }: React.PropsWithChildren<ITextFieldProps>) => {
-  const [requiredFields, setRequiredFields] = useRecoilState(RequiredFieldsAtom);
+  const [, setRequiredFields] = useRecoilState(RequiredFieldsAtom);
   const [text, setText] = React.useState<string | null>(value);
 
   const onTextChange = (txtValue: string) => {

src/panelWebView/components/Fields/WrapperField.tsx

@@ -230,7 +230,6 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
     return (
       <FieldBoundary key={field.name} fieldName={field.title || field.name}>
         <NumberField
-          key={field.name}
           label={field.title || field.name}
           description={field.description}
           options={field.numberOptions}