Merge branch 'release/10.10.1'

saddlebackdev · May 1, 2024 · e907a6a · e907a6a
2 parents 80376c2 + 35f0f59
commit e907a6a
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 71 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,14 @@
 # Change Log
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 10.10.1
+_May 1, 2024_
+- Incorporate change from `10.9.9-hotfix1` into `latest`.
+
+## 10.9.9 Hotfix 1
+_May 1, 2024_
+- Add some conditional logic to `<Select>` component to prevent `onInputChange` prop and using "createable" options from stomping on each others' toes.  [PR #497](https://github.com/saddlebackdev/react-cm-ui/pull/497).
+
 ## 10.10.0
 _April 30, 2024_
 - Fix _yet another_ issue in the TypeScript types for the `<Chip>` component.  [PR #494](https://github.com/saddlebackdev/react-cm-ui/pull/494)

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@saddlebackchurch/react-cm-ui",
-  "version": "10.10.0",
+  "version": "10.10.1",
   "description": "React UI for Healthy Church",
   "jsnext:main": "src/",
   "main": "core/",

diff --git a/src/inputs/select/select.jsx b/src/inputs/select/select.jsx
@@ -1014,6 +1014,83 @@ const Select = React.forwardRef(function Select(props, ref) {
     const showRequiredIndicator = required && (alwaysShowRequiredIndicator || isEmpty(value));
     const ReactSelectComponent = isCreatable ? ReactSelect.Creatable : CustomReactSelect;
 
+    const selectProps = {
+        arrowRenderer: () => {
+            if (isCreatable) {
+                return (
+                    <div>
+                        <Icon
+                            compact
+                            size={16}
+                            title="Select"
+                            type="plus"
+                        />
+                    </div>
+                );
+            }
+
+            if (isUnderlined) {
+                return (
+                    <Icon
+                        compact
+                        size={10}
+                        title="Select"
+                        type="caret-down"
+                    />
+                );
+            }
+
+            return (
+                <div>
+                    <Icon
+                        compact
+                        size={16}
+                        title="Select"
+                        type={dropdownArrowIconType}
+                    />
+                </div>
+            );
+        },
+        clearRenderer: () => (
+            <div>
+                <Icon
+                    compact
+                    size={16}
+                    title="Clear Selection"
+                    type="times"
+                />
+            </div>
+        ),
+        clearable: isClearable,
+        disabled: disabledProp || disableProp || isRedacted,
+        matchProp: !isCreatable ? matchProp : null,
+        menuContainerStyle: dropdownMenuContainerStyle,
+        menuRenderer,
+        menuStyle: dropdownMenuStyle,
+        multi: multiple,
+        noResultsText,
+        onClose,
+        onInputKeyDown,
+        onOpen,
+        name: 'firtsSelect',
+        onChange,
+        optionComponent,
+        options,
+        promptTextCreator: isCreatable && promptTextCreator,
+        placeholder,
+        searchable: isSearchable,
+        tabIndex,
+        value,
+        valueComponent,
+    };
+
+    // Conditionaly passing this prop because if it's passed to the component
+    // it will prevent the creatable option to work correctly
+    // TODO: Investigate further on ways to make both props work together
+    if (isFunction(onInputChangeProp)) {
+        selectProps.onInputChange = onInputChange;
+    }
+
     return (
         <div
             // eslint-disable-next-line react/jsx-props-no-spreading
@@ -1041,74 +1118,8 @@ const Select = React.forwardRef(function Select(props, ref) {
             {isRedacted && <SelectScreenGuard hasLabel={!isEmpty(label)} />}
 
             <ReactSelectComponent
-                arrowRenderer={() => {
-                    if (isCreatable) {
-                        return (
-                            <div>
-                                <Icon
-                                    compact
-                                    size={16}
-                                    title="Select"
-                                    type="plus"
-                                />
-                            </div>
-                        );
-                    }
-
-                    if (isUnderlined) {
-                        return (
-                            <Icon
-                                compact
-                                size={10}
-                                title="Select"
-                                type="caret-down"
-                            />
-                        );
-                    }
-
-                    return (
-                        <div>
-                            <Icon
-                                compact
-                                size={16}
-                                title="Select"
-                                type={dropdownArrowIconType}
-                            />
-                        </div>
-                    );
-                }}
-                clearRenderer={() => (
-                    <div>
-                        <Icon
-                            compact
-                            size={16}
-                            title="Clear Selection"
-                            type="times"
-                        />
-                    </div>
-                )}
-                clearable={isClearable}
-                disabled={disabledProp || disableProp || isRedacted}
-                matchProp={!isCreatable ? matchProp : null}
-                menuContainerStyle={dropdownMenuContainerStyle}
-                menuRenderer={menuRenderer}
-                menuStyle={dropdownMenuStyle}
-                multi={multiple}
-                noResultsText={noResultsText}
-                onClose={onClose}
-                onInputKeyDown={onInputKeyDown}
-                onOpen={onOpen}
-                name="firstSelect"
-                onChange={onChange}
-                onInputChange={onInputChange}
-                optionComponent={optionComponent}
-                options={options}
-                promptTextCreator={isCreatable && promptTextCreator}
-                placeholder={placeholder}
-                searchable={isSearchable}
-                tabIndex={tabIndex}
-                value={value}
-                valueComponent={valueComponent}
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...selectProps}
             >
                 {isCreatable && CustomCreatableSelect}
             </ReactSelectComponent>

diff --git a/src/versions.js b/src/versions.js
@@ -18,7 +18,7 @@
 
 const versions = {
     'react-cm-ui': {
-        package: '10.10.0',
+        package: '10.10.1',
         components: {
             dataDisplay: {
                 chip: {