@wordpress/components
Version:
UI components for WordPress.
56 lines (54 loc) • 1.85 kB
JavaScript
/**
* WordPress dependencies
*/
import { useMergeRefs } from '@wordpress/compose';
import { forwardRef, useEffect, useRef } from '@wordpress/element';
/**
* Internal dependencies
*/
import { ControlWithError } from '../control-with-error';
import ComboboxControl from '../../combobox-control';
import { jsx as _jsx } from "react/jsx-runtime";
const UnforwardedValidatedComboboxControl = ({
required,
customValidator,
onChange,
markWhenOptional,
...restProps
}, forwardedRef) => {
const validityTargetRef = useRef(null);
const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);
const valueRef = useRef(restProps.value);
// TODO: Upstream limitation - The `required` attribute is not passed down to the input,
// so we need to set it manually.
useEffect(() => {
const input = validityTargetRef.current?.querySelector('input[role="combobox"]');
if (input) {
input.required = required !== null && required !== void 0 ? required : false;
}
}, [required]);
return (
/*#__PURE__*/
// TODO: Bug - Missing value error is not cleared immediately on change, waits for blur.
_jsx(ControlWithError, {
required: required,
markWhenOptional: markWhenOptional,
ref: mergedRefs,
customValidator: () => {
return customValidator?.(valueRef.current);
},
getValidityTarget: () => validityTargetRef.current?.querySelector('input[role="combobox"]'),
children: /*#__PURE__*/_jsx(ComboboxControl, {
__nextHasNoMarginBottom: true,
__next40pxDefaultSize: true,
...restProps,
onChange: value => {
valueRef.current = value;
onChange?.(value);
}
})
})
);
};
export const ValidatedComboboxControl = forwardRef(UnforwardedValidatedComboboxControl);
//# sourceMappingURL=combobox-control.js.map