@trackunit/react-form-components 2.6.14 → 2.6.16

package/index.cjs.js

@@ -4860,7 +4860,6 @@ 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(() => {
@@ -4880,17 +4879,23 @@ 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 (isFirstRender || innerValue === undefined) {
+        if (innerValue === undefined || lastNotifiedValueRef.current === innerValue) {
             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, isFirstRender]);
+    }, [innerValue]);
     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, useIsFirstRender } 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 } 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,7 +4859,6 @@ 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(() => {
@@ -4879,17 +4878,23 @@ 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 (isFirstRender || innerValue === undefined) {
+        if (innerValue === undefined || lastNotifiedValueRef.current === innerValue) {
             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, isFirstRender]);
+    }, [innerValue]);
     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.14",
+  "version": "2.6.16",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "migrations": "./migrations.json",
@@ -16,7 +16,7 @@
     "zod": "^3.25.76",
     "tailwind-merge": "^2.0.0",
     "@trackunit/css-class-variance-utilities": "1.14.17",
-    "@trackunit/react-components": "2.10.9",
+    "@trackunit/react-components": "2.10.10",
     "@trackunit/ui-icons": "1.14.16",
     "@trackunit/shared-utils": "1.16.20",
     "@trackunit/ui-design-tokens": "1.15.7",