fix(form): Added fixes required for Concurrent Rendering

Author: mlaursen

packages/form/src/select/Listbox.tsx

@@ -1,4 +1,10 @@
-import { forwardRef, HTMLAttributes, useCallback, useRef } from "react";
+import {
+  forwardRef,
+  HTMLAttributes,
+  useCallback,
+  useEffect,
+  useRef,
+} from "react";
 import cn from "classnames";
 import { List, ListElement } from "@react-md/list";
 import {
@@ -360,14 +366,18 @@ export const Listbox = forwardRef<ListElement, ListboxProps>(function Listbox(
     });
 
   const prevVisible = useRef(visible);
-  if (visible !== prevVisible.current) {
+  useEffect(() => {
+    if (prevVisible.current === visible) {
+      return;
+    }
+
     prevVisible.current = visible;
     // whenever it gains visibility, try to set the focused index to the
     // current active value
     if (visible) {
       setFocusedIndex(getIndex());
     }
-  }
+  }, [getIndex, setFocusedIndex, visible]);
 
   const handleFocus = useCallback(
     (event: React.FocusEvent<ListElement>) => {

packages/form/src/slider/useDiscreteValueVisibility.ts

@@ -72,9 +72,6 @@ export function useDiscreteValueVisibility({
   // immediately
   const [isModeTransition, setModeTransition] = useState(false);
   const [visible, setVisible] = useState(false);
-  if (discrete && visible && disabled) {
-    setVisible(false);
-  }
 
   useEffect(() => {
     if (!discrete) {
@@ -83,6 +80,11 @@ export function useDiscreteValueVisibility({
       return;
     }
 
+    if (discrete && visible && disabled) {
+      setVisible(false);
+      return;
+    }
+
     if (!isKeyboard) {
       // only considered a "transition" when the tooltip is already visible and
       // switching away from keyboard mode
@@ -96,8 +98,8 @@ export function useDiscreteValueVisibility({
     // the user switch between the modes more easily so if the active element is
     // the current thumb, we're good to go
     setModeTransition(false);
-    setVisible(document.activeElement === ref.current);
-  }, [isKeyboard, visible, discrete]);
+    setVisible(!disabled && document.activeElement === ref.current);
+  }, [isKeyboard, visible, discrete, disabled]);
 
   useEffect(() => {
     if (!discrete) {

packages/form/src/slider/useRangeSlider.ts

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { nearest } from "@react-md/utils";
 
 import {
@@ -197,23 +197,25 @@ export function useRangeSlider(
   }, [onChange, value]);
 
   const prev = useRef({ min, max, step });
-  if (
-    prev.current.min !== min ||
-    prev.current.max !== max ||
-    prev.current.step !== step
-  ) {
-    // ensure that if the `min`, `max`, or `step` value changes that the value
-    // is updated as well. Without this, there will be a runtime error if the
-    // value is not within the new range.
-    prev.current = { min, max, step };
-    const steps = getSteps(min, max, step);
-    const nextValue: RangeSliderValue = [
-      nearest(value[0], min, max, steps),
-      nearest(value[1], min, max, steps),
-    ];
-    currentValue.current = nextValue;
-    setValue(nextValue);
-  }
+  useEffect(() => {
+    if (
+      prev.current.min !== min ||
+      prev.current.max !== max ||
+      prev.current.step !== step
+    ) {
+      // ensure that if the `min`, `max`, or `step` value changes that the value
+      // is updated as well. Without this, there will be a runtime error if the
+      // value is not within the new range.
+      prev.current = { min, max, step };
+      const steps = getSteps(min, max, step);
+      const nextValue: RangeSliderValue = [
+        nearest(value[0], min, max, steps),
+        nearest(value[1], min, max, steps),
+      ];
+      currentValue.current = nextValue;
+      setValue(nextValue);
+    }
+  }, [min, max, step, value]);
 
   if (updateOn === "change" && currentValue.current !== value) {
     currentValue.current = value;

packages/form/src/slider/useSlider.ts

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { nearest } from "@react-md/utils";
 
 import {
@@ -116,19 +116,21 @@ export function useSlider(
   }, [onChange, value]);
 
   const prev = useRef({ min, max, step });
-  if (
-    prev.current.min !== min ||
-    prev.current.max !== max ||
-    prev.current.step !== step
-  ) {
-    // ensure that if the `min`, `max`, or `step` value changes that the value
-    // is updated as well. Without this, there will be a runtime error if the
-    // value is not within the new range.
-    prev.current = { min, max, step };
-    const nextValue = nearest(value, min, max, getSteps(min, max, step));
-    currentValue.current = nextValue;
-    setValue(nextValue);
-  }
+  useEffect(() => {
+    if (
+      prev.current.min !== min ||
+      prev.current.max !== max ||
+      prev.current.step !== step
+    ) {
+      // ensure that if the `min`, `max`, or `step` value changes that the value
+      // is updated as well. Without this, there will be a runtime error if the
+      // value is not within the new range.
+      prev.current = { min, max, step };
+      const nextValue = nearest(value, min, max, getSteps(min, max, step));
+      currentValue.current = nextValue;
+      setValue(nextValue);
+    }
+  }, [min, max, step, value]);
 
   if (updateOn === "change" && currentValue.current !== value) {
     currentValue.current = value;

packages/form/src/slider/utils.ts

@@ -252,6 +252,7 @@ export const getDragPercentage = ({
           min,
           max,
           value: thumb1Value,
+          validate: false,
         });
 
   let thumb2Percentage: number | undefined;
@@ -260,6 +261,7 @@ export const getDragPercentage = ({
       min,
       max,
       value: thumb2Value,
+      validate: false,
     });
     thumb1Percentage = Math.min(thumb1Percentage, percentage);
     thumb2Percentage =

packages/form/src/text-field/TextArea.tsx

@@ -7,6 +7,7 @@ import {
   Ref,
   TextareaHTMLAttributes,
   useCallback,
+  useEffect,
   useRef,
   useState,
 } from "react";
@@ -171,9 +172,11 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
     });
 
     const [height, setHeight] = useState<number>();
-    if (resize !== "auto" && typeof height === "number") {
-      setHeight(undefined);
-    }
+    useEffect(() => {
+      if (resize !== "auto" && typeof height === "number") {
+        setHeight(undefined);
+      }
+    }, [resize, height]);
 
     const maskRef = useRef<HTMLTextAreaElement | null>(null);
     const [scrollable, setScrollable] = useState(false);

packages/form/src/text-field/__tests__/__snapshots__/TextArea.tsx.snap

@@ -48,6 +48,7 @@ exports[`TextArea should handle updating the height correctly based on the resiz
     data-testid="container"
     id="text-area"
     rows="2"
+    style=""
   />
 </div>
 `;

packages/form/src/useFieldStates.ts

@@ -4,6 +4,7 @@ import {
   FocusEvent,
   FocusEventHandler,
   useCallback,
+  useEffect,
   useRef,
   useState,
 } from "react";
@@ -129,10 +130,12 @@ export function useFieldStates<E extends FormElement>({
   // `useNumberField` hook since the `value` will be set back to the empty
   // string on invalid numbers.
   const prevValue = useRef(value);
-  if (prevValue.current !== value && typeof value === "string") {
-    prevValue.current = value;
-    setValued(value.length > 0);
-  }
+  useEffect(() => {
+    if (prevValue.current !== value && typeof value === "string") {
+      prevValue.current = value;
+      setValued(value.length > 0);
+    }
+  }, [value]);
 
   return {
     valued,