@wordpress/components
Version:
UI components for WordPress.
64 lines (60 loc) • 2.22 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ValidatedComboboxControl = void 0;
var _compose = require("@wordpress/compose");
var _element = require("@wordpress/element");
var _controlWithError = require("../control-with-error");
var _comboboxControl = _interopRequireDefault(require("../../combobox-control"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const UnforwardedValidatedComboboxControl = ({
required,
customValidator,
onChange,
markWhenOptional,
...restProps
}, forwardedRef) => {
const validityTargetRef = (0, _element.useRef)(null);
const mergedRefs = (0, _compose.useMergeRefs)([forwardedRef, validityTargetRef]);
const valueRef = (0, _element.useRef)(restProps.value);
// TODO: Upstream limitation - The `required` attribute is not passed down to the input,
// so we need to set it manually.
(0, _element.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.
(0, _jsxRuntime.jsx)(_controlWithError.ControlWithError, {
required: required,
markWhenOptional: markWhenOptional,
ref: mergedRefs,
customValidator: () => {
return customValidator?.(valueRef.current);
},
getValidityTarget: () => validityTargetRef.current?.querySelector('input[role="combobox"]'),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_comboboxControl.default, {
__nextHasNoMarginBottom: true,
__next40pxDefaultSize: true,
...restProps,
onChange: value => {
valueRef.current = value;
onChange?.(value);
}
})
})
);
};
const ValidatedComboboxControl = exports.ValidatedComboboxControl = (0, _element.forwardRef)(UnforwardedValidatedComboboxControl);
//# sourceMappingURL=combobox-control.js.map