From 244e3a1fea0e36c5ff07ca1229620984378434ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carlos=20Proa=C3=B1o?= <c@rlos.pro>
Date: Wed, 1 May 2024 12:34:20 -0600
Subject: [PATCH 1/2] feat: conditionaly pass onInputChange prop

---
 src/inputs/select/select.jsx | 147 +++++++++++++++++++----------------
 1 file changed, 79 insertions(+), 68 deletions(-)

diff --git a/src/inputs/select/select.jsx b/src/inputs/select/select.jsx
index f5ecf273..2f9ae296 100644
--- 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>

From 42deaef5c7e12dc321a29264eab8e7a7195b1bf7 Mon Sep 17 00:00:00 2001
From: Geoffrey Roberts <groberts314@yahoo.com>
Date: Wed, 1 May 2024 12:11:07 -0700
Subject: [PATCH 2/2] feat: update version to 10.9.9-hotfix1

---
 CHANGELOG.md      | 4 ++++
 package-lock.json | 2 +-
 package.json      | 2 +-
 src/versions.js   | 2 +-
 4 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4c9015e6..53cbb221 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,10 @@
 # Change Log
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 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.9.9
 _April 9, 2024_
 - Fix another issue in the TypeScript types for the `<Chip>` component.  [PR #492](https://github.com/saddlebackdev/react-cm-ui/pull/492)
diff --git a/package-lock.json b/package-lock.json
index f5210f76..45c2c49a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@saddlebackchurch/react-cm-ui",
-  "version": "10.9.9",
+  "version": "10.9.9-hotfix1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 49975283..4665df71 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@saddlebackchurch/react-cm-ui",
-  "version": "10.9.9",
+  "version": "10.9.9-hotfix1",
   "description": "React UI for Healthy Church",
   "jsnext:main": "src/",
   "main": "core/",
diff --git a/src/versions.js b/src/versions.js
index a9612760..4adc2404 100644
--- a/src/versions.js
+++ b/src/versions.js
@@ -18,7 +18,7 @@
 
 const versions = {
     'react-cm-ui': {
-        package: '10.9.9',
+        package: '10.9.9-hotfix1',
         components: {
             dataDisplay: {
                 chip: {