diff --git a/CHANGELOG.md b/CHANGELOG.md
index 78e778f2d..cd062f5f5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,8 @@
+## react-components 5.34.10 (2024-06-24)
+
+- [Select] Pass through additional props to select inner component (by [@sean-mckenna](https://github.com/sean-mckenna))
+- [Button] Remove button loading background colour (by [@sean-mckenna](https://github.com/sean-mckenna))
+
## react-components 5.34.9 (2024-04-29)
- [Logo] Adjust Security Compliance Management logo viewBox to match Continuous Delivery (by [@Lukeaber](https://github.com/Lukeaber))
diff --git a/packages/react-components/package.json b/packages/react-components/package.json
index adf3814d8..41e94e8cd 100644
--- a/packages/react-components/package.json
+++ b/packages/react-components/package.json
@@ -1,6 +1,6 @@
{
"name": "@puppet/react-components",
- "version": "5.34.9",
+ "version": "5.34.10",
"author": "Puppet, Inc.",
"license": "Apache-2.0",
"main": "build/library.js",
@@ -91,4 +91,4 @@
"regenerator-runtime": "^0.13.7",
"scroll-into-view-if-needed": "^2.2.25"
}
-}
\ No newline at end of file
+}
diff --git a/packages/react-components/source/react/library/select/Select.js b/packages/react-components/source/react/library/select/Select.js
index 31199ff99..308067377 100644
--- a/packages/react-components/source/react/library/select/Select.js
+++ b/packages/react-components/source/react/library/select/Select.js
@@ -380,6 +380,11 @@ class Select extends Component {
style,
type,
value,
+ actionLabel,
+ onChange,
+ onFilter,
+ onBlur: onBlurProp,
+ ...restProps
} = this.props;
let input;
@@ -411,6 +416,7 @@ class Select extends Component {
}}
onChange={onValueChange}
autoComplete="off"
+ {...restProps}
/>
);
break;
@@ -431,6 +437,7 @@ class Select extends Component {
ref={button => {
this.button = button;
}}
+ {...restProps}
/>
setValue(newValue)}
-/>
+/>;
```
### Nonexistent value
@@ -61,17 +61,23 @@ const isValueInOptions = options.map(option => option.value).includes(value);
value={value}
onChange={newValue => setValue(newValue)}
/>
- {!isValueInOptions && "{value}" is not an option}
-
+ {!isValueInOptions && (
+
+ "{value}" is not an option
+
+ )}
+;
```
## Variations
### Autocomplete
-With `type` set to `autocomplete`, the `Select` input will accept text and provide filtered menu options accordingly. Full keyboard navigation of the menu options is retained.
+With `type` set to `autocomplete`, the `Select` input will accept text and the menu options can be filtered accordingly. Full keyboard navigation of the menu options is retained.
```jsx
+const [fieldValue, setFieldValue] = React.useState('');
+
const options = [
{ value: 'apple', label: 'apple' },
{ value: 'orange', label: 'orange' },
@@ -86,16 +92,30 @@ const options = [
const style = { margin: 10 };
+const noResults = [
+ {
+ value: [],
+ label: 'No results found',
+ },
+];
+
+let filteredOptions = [...options];
+if (state.fieldValue !== undefined && state.fieldValue !== '') {
+ filteredOptions = options.filter(options =>
+ options.label.includes(state.fieldValue),
+ );
+}
+