@trackunit/react-form-components 2.6.18-alpha-95d9a652800.0 → 2.6.18-alpha-62031fc7c43.0

package/index.cjs.js

@@ -4860,6 +4860,7 @@ Search.displayName = "Search";
  *
  */
 const FormFieldSelectAdapter = ({ className, "data-testid": dataTestId, helpText, helpAddon, tip, label, isInvalid = false, errorMessage, name, onBlur, options, value, defaultValue, id, htmlFor: htmlForProp, onChange, children, style, ref, required = false, ...rest }) => {
+    const isFirstRender = reactComponents.useIsFirstRender();
     const [innerValue, setInnerValue] = react.useState(value ?? defaultValue);
     const onChangeRef = react.useRef(onChange);
     react.useEffect(() => {
@@ -4879,23 +4880,17 @@ const FormFieldSelectAdapter = ({ className, "data-testid": dataTestId, helpText
     const innerRef = react.useRef(null);
     // eslint-disable-next-line @trackunit/no-typescript-assertion, @typescript-eslint/no-non-null-assertion
     react.useImperativeHandle(ref, () => innerRef.current, []);
-    // Bridges a react-select pick back to the hidden native <select> so `register`/native form
-    // consumers see a real change event. It must fire only when the value actually changes: seeding
-    // the ref with the initial value means mounting with a value is not reported as a change, which
-    // would otherwise write to the consumer's form and mark it dirty with no user interaction.
-    const lastNotifiedValueRef = react.useRef(innerValue);
     react.useEffect(() => {
-        if (innerValue === undefined || lastNotifiedValueRef.current === innerValue) {
+        if (isFirstRender || innerValue === undefined) {
             return;
         }
-        lastNotifiedValueRef.current = innerValue;
         const event = new Event("change");
         if (innerValue === "" && innerRef.current) {
             innerRef.current.value = ""; // Set the desired option value
         }
         innerRef.current?.dispatchEvent(event);
         onChangeRef.current?.(event);
-    }, [innerValue]);
+    }, [innerValue, isFirstRender]);
     const optionsWithCurrentSelectionBackupOption = [
         // Add the current selection in case there's no options loaded yet (in CreatableSelect)
         // Also _don't_ add it if it's a duplicate

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation, NamespaceTrans } from '@trackunit/i18n-library-translation';
-import { IconButton, Icon, Tooltip, Button, Popover, PopoverTrigger, PopoverContent, cvaMenu, cvaMenuList, Tag, useIsTextTruncated, ZStack, MenuItem, useMeasure, useDebounce, useMergeRefs, Spinner, useScrollBlock, Text, Heading } from '@trackunit/react-components';
+import { IconButton, Icon, Tooltip, Button, Popover, PopoverTrigger, PopoverContent, cvaMenu, cvaMenuList, Tag, useIsTextTruncated, ZStack, MenuItem, useMeasure, useDebounce, useMergeRefs, Spinner, useScrollBlock, Text, Heading, useIsFirstRender } from '@trackunit/react-components';
 import { useMemo, useRef, useEffect, useImperativeHandle, useState, useCallback, useLayoutEffect, isValidElement, cloneElement, useReducer, createContext, useContext, useId } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
@@ -4859,6 +4859,7 @@ Search.displayName = "Search";
  *
  */
 const FormFieldSelectAdapter = ({ className, "data-testid": dataTestId, helpText, helpAddon, tip, label, isInvalid = false, errorMessage, name, onBlur, options, value, defaultValue, id, htmlFor: htmlForProp, onChange, children, style, ref, required = false, ...rest }) => {
+    const isFirstRender = useIsFirstRender();
     const [innerValue, setInnerValue] = useState(value ?? defaultValue);
     const onChangeRef = useRef(onChange);
     useEffect(() => {
@@ -4878,23 +4879,17 @@ const FormFieldSelectAdapter = ({ className, "data-testid": dataTestId, helpText
     const innerRef = useRef(null);
     // eslint-disable-next-line @trackunit/no-typescript-assertion, @typescript-eslint/no-non-null-assertion
     useImperativeHandle(ref, () => innerRef.current, []);
-    // Bridges a react-select pick back to the hidden native <select> so `register`/native form
-    // consumers see a real change event. It must fire only when the value actually changes: seeding
-    // the ref with the initial value means mounting with a value is not reported as a change, which
-    // would otherwise write to the consumer's form and mark it dirty with no user interaction.
-    const lastNotifiedValueRef = useRef(innerValue);
     useEffect(() => {
-        if (innerValue === undefined || lastNotifiedValueRef.current === innerValue) {
+        if (isFirstRender || innerValue === undefined) {
             return;
         }
-        lastNotifiedValueRef.current = innerValue;
         const event = new Event("change");
         if (innerValue === "" && innerRef.current) {
             innerRef.current.value = ""; // Set the desired option value
         }
         innerRef.current?.dispatchEvent(event);
         onChangeRef.current?.(event);
-    }, [innerValue]);
+    }, [innerValue, isFirstRender]);
     const optionsWithCurrentSelectionBackupOption = [
         // Add the current selection in case there's no options loaded yet (in CreatableSelect)
         // Also _don't_ add it if it's a duplicate

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "2.6.18-alpha-95d9a652800.0",
+  "version": "2.6.18-alpha-62031fc7c43.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "migrations": "./migrations.json",
@@ -10,17 +10,17 @@
   "dependencies": {
     "react-calendar": "^6.0.0",
     "react-select": "^5.10.2",
-    "@trackunit/date-and-time-utils": "1.14.20-alpha-95d9a652800.0",
+    "@trackunit/date-and-time-utils": "1.14.20-alpha-62031fc7c43.0",
     "usehooks-ts": "^3.1.0",
     "libphonenumber-js": "^1.13.6",
     "zod": "^3.25.76",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/css-class-variance-utilities": "1.14.19-alpha-95d9a652800.0",
-    "@trackunit/react-components": "2.10.12-alpha-95d9a652800.0",
-    "@trackunit/ui-icons": "1.14.18-alpha-95d9a652800.0",
-    "@trackunit/shared-utils": "1.16.22-alpha-95d9a652800.0",
-    "@trackunit/ui-design-tokens": "1.15.9-alpha-95d9a652800.0",
-    "@trackunit/i18n-library-translation": "2.4.18-alpha-95d9a652800.0",
+    "@trackunit/css-class-variance-utilities": "1.14.19-alpha-62031fc7c43.0",
+    "@trackunit/react-components": "2.10.12-alpha-62031fc7c43.0",
+    "@trackunit/ui-icons": "1.14.18-alpha-62031fc7c43.0",
+    "@trackunit/shared-utils": "1.16.22-alpha-62031fc7c43.0",
+    "@trackunit/ui-design-tokens": "1.15.9-alpha-62031fc7c43.0",
+    "@trackunit/i18n-library-translation": "2.4.18-alpha-62031fc7c43.0",
     "string-ts": "^2.0.0",
     "es-toolkit": "^1.39.10"
   },