Merge pull request #3209 from 10up/fix/3201

Change disabling method to avoid losing focus on facets
10up · Dec 16, 2022 · 788e0f1 · 788e0f1
2 parents bf2ddee + 581fb1b
commit 788e0f1
Showing 1 changed file with 12 additions and 4 deletions.
diff --git a/assets/js/instant-results/components/common/checkbox.js b/assets/js/instant-results/components/common/checkbox.js
@@ -6,17 +6,25 @@ import { WPElement } from '@wordpress/element';
 /**
  * Checkbox component.
  *
- * @param {Option} props       Component props.
+ * @param {Option} props Component props.
  * @param {string} props.count Checkbox count.
- * @param {string} props.id    Checkbox ID.
+ * @param {string} props.id Checkbox ID.
  * @param {string} props.label Checkbox label.
+ * @param {Function} props.onChange Change event handler.
  *
  * @returns {WPElement} Component element.
  */
-export default ({ count, id, label, ...props }) => {
+export default ({ count, disabled, id, label, onChange, ...props }) => {
 	return (
 		<div className="ep-search-checkbox">
-			<input className="ep-search-checkbox__input" id={id} type="checkbox" {...props} />{' '}
+			<input
+				aria-disabled={disabled}
+				className="ep-search-checkbox__input"
+				id={id}
+				onChange={!disabled ? onChange : null}
+				type="checkbox"
+				{...props}
+			/>{' '}
 			<label className="ep-search-checkbox__label" htmlFor={id}>
 				{label} {count && <span className="ep-search-checkbox__count">{count}</span>}
 			</label>