react-better-html 1.1.78 → 1.1.79
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +6 -5
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +6 -5
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -4677,7 +4677,7 @@ var DropdownComponent = forwardRef7(function Dropdown({
|
|
|
4677
4677
|
...props
|
|
4678
4678
|
}, ref) {
|
|
4679
4679
|
const theme2 = useTheme();
|
|
4680
|
-
const
|
|
4680
|
+
const inputFieldHolderRef = useRef3(null);
|
|
4681
4681
|
const inputRef = useRef3(null);
|
|
4682
4682
|
const [isOpen, setIsOpen] = useBooleanState();
|
|
4683
4683
|
const [isOpenLate, setIsOpenLate] = useBooleanState();
|
|
@@ -4788,7 +4788,7 @@ var DropdownComponent = forwardRef7(function Dropdown({
|
|
|
4788
4788
|
}, [filteredOptions]);
|
|
4789
4789
|
useEffect5(() => {
|
|
4790
4790
|
const handleClickOutside = (event) => {
|
|
4791
|
-
if (
|
|
4791
|
+
if (inputFieldHolderRef.current && !inputFieldHolderRef.current.contains(event.target)) {
|
|
4792
4792
|
setIsOpen.setFalse();
|
|
4793
4793
|
setSearchQuery("");
|
|
4794
4794
|
setFocusedOptionIndex(void 0);
|
|
@@ -4808,7 +4808,7 @@ var DropdownComponent = forwardRef7(function Dropdown({
|
|
|
4808
4808
|
const displayValue = withSearch && isFocused ? searchQuery : selectedOption?.label ?? "";
|
|
4809
4809
|
const withClearButton = isOpen && selectedOption;
|
|
4810
4810
|
const readyPlaceholder = placeholder ? placeholder : `Select an ${label?.toLowerCase() ?? "option"}`;
|
|
4811
|
-
return /* @__PURE__ */ jsx13(Div_default.column, { width: "100%", position: "relative", userSelect: "none", ...props,
|
|
4811
|
+
return /* @__PURE__ */ jsx13(Div_default.column, { width: "100%", position: "relative", userSelect: "none", ...props, children: /* @__PURE__ */ jsxs8(Div_default.row, { position: "relative", width: "100%", children: [
|
|
4812
4812
|
/* @__PURE__ */ jsx13(
|
|
4813
4813
|
InputField_default,
|
|
4814
4814
|
{
|
|
@@ -4828,6 +4828,7 @@ var DropdownComponent = forwardRef7(function Dropdown({
|
|
|
4828
4828
|
onFocus: setIsFocused.setTrue,
|
|
4829
4829
|
onBlur: setIsFocused.setFalse,
|
|
4830
4830
|
onKeyDown: onKeyDownInputField,
|
|
4831
|
+
holderRef: inputFieldHolderRef,
|
|
4831
4832
|
onChangeValue: withSearch ? onChangeValue : void 0,
|
|
4832
4833
|
insideInputFieldComponent: /* @__PURE__ */ jsx13(
|
|
4833
4834
|
Div_default,
|
|
@@ -5287,9 +5288,9 @@ var InputFieldComponent = forwardRef8(function InputField({
|
|
|
5287
5288
|
if (!withDebounce) return;
|
|
5288
5289
|
onChangeValue?.(debouncedValue);
|
|
5289
5290
|
}, [withDebounce, onChangeValue, debouncedValue]);
|
|
5290
|
-
return /* @__PURE__ */ jsxs10(Div_default.column, { width: "100%", gap: theme2.styles.gap, ...styledComponentStylesWithExcluded,
|
|
5291
|
+
return /* @__PURE__ */ jsxs10(Div_default.column, { width: "100%", gap: theme2.styles.gap, ...styledComponentStylesWithExcluded, children: [
|
|
5291
5292
|
label && /* @__PURE__ */ jsx15(Label_default, { text: label, color: labelColor, required, isError: !!errorText }),
|
|
5292
|
-
/* @__PURE__ */ jsxs10(Div_default, { position: "relative", width: "100%", children: [
|
|
5293
|
+
/* @__PURE__ */ jsxs10(Div_default, { position: "relative", width: "100%", ref: holderRef, children: [
|
|
5293
5294
|
leftIcon && /* @__PURE__ */ jsx15(
|
|
5294
5295
|
Icon_default,
|
|
5295
5296
|
{
|