LG-3330: password input controlled value (#1942)

* update hook to remove the controlled value from state

* remove expect

* address comments

Author: shaneeza

.changeset/late-ants-remain.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/hooks': major
+---
+
+Updates `useControlledValue` hook to remove the controlled value from internal state. Instead the controlled value is consumed directly.

packages/hooks/src/useControlledValue/useControlledValue.spec.ts

@@ -1,5 +1,5 @@
 import { ChangeEvent } from 'react';
-import { act } from '@testing-library/react';
+import { act } from 'react-test-renderer';
 import { renderHook } from '@testing-library/react-hooks';
 
 import { useControlledValue } from './useControlledValue';
@@ -16,7 +16,7 @@ describe('packages/lib/useControlledValue', () => {
 
     act(() => {
       current.handleChange({ target: { value: 'banana' } } as ChangeEvent<any>);
-      current.setInternalValue('banana');
+      current.setUncontrolledValue('banana');
     });
     expect(handler).toHaveBeenCalledWith(
       expect.objectContaining({ target: { value: 'banana' } }),

packages/hooks/src/useControlledValue/useControlledValue.ts

@@ -1,4 +1,4 @@
-import { ChangeEventHandler, useEffect, useState } from 'react';
+import { ChangeEventHandler, useState } from 'react';
 import isUndefined from 'lodash/isUndefined';
 
 interface ControlledValueReturnObject<T extends string> {
@@ -15,7 +15,7 @@ interface ControlledValueReturnObject<T extends string> {
    * A setter for the internal value.
    * Does not change the controlled value if the provided value has not changed.
    */
-  setInternalValue: React.Dispatch<React.SetStateAction<T>>;
+  setUncontrolledValue: React.Dispatch<React.SetStateAction<T>>;
 }
 
 /**
@@ -30,29 +30,22 @@ export const useControlledValue = <T extends string>(
 ): ControlledValueReturnObject<T> => {
   const isControlled = !isUndefined(controlledValue);
 
-  // Keep track of state internally, initializing it to the controlled value
-  const [value, setInternalValue] = useState<T>(controlledValue ?? ('' as T));
-
-  // If the controlled value changes, update the internal state variable
-  useEffect(() => {
-    if (!isUndefined(controlledValue)) {
-      setInternalValue(controlledValue);
-    }
-  }, [controlledValue]);
+  // Keep track of the uncontrolled value state internally
+  const [uncontrolledValue, setUncontrolledValue] = useState<T>('' as T);
 
   // Create a change event handler that either updates the internal state
   // or fires an external change handler
   const handleChange: ChangeEventHandler<any> = e => {
     changeHandler?.(e);
     if (!isControlled) {
-      setInternalValue(e.target.value as T);
+      setUncontrolledValue(e.target.value as T);
     }
   };
 
   return {
     isControlled,
-    value,
+    value: isControlled ? controlledValue : uncontrolledValue,
     handleChange,
-    setInternalValue,
+    setUncontrolledValue,
   };
 };