mui-phone-input - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

base/index.js

@@ -21,4 +21,4 @@ var __rest = (this && this.__rest) || function (s, e) {
     var { slotProps } = _a, props = __rest(_a, ["slotProps"]);
-    const defaultRootProps = ((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) === null || _b === void 0 ? void 0 : _b.className) ? {} : { background: "white", color: "black", paddingLeft: 5 };
-    const defaultInputProps = ((_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.input) === null || _c === void 0 ? void 0 : _c.className) ? {} : { outline: "none", paddingLeft: 5 };
+    const defaultInputProps = ((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.input) === null || _b === void 0 ? void 0 : _b.className) ? {} : { outline: "none", border: "none", paddingLeft: 5, width: "calc(100% - 30px)" };
+    const defaultRootProps = ((_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) === null || _c === void 0 ? void 0 : _c.className) ? {} : { background: "white", color: "black", paddingLeft: 5 };
     return (_jsx(BaseInput, Object.assign({ ref: ref }, props, { slotProps: Object.assign(Object.assign({}, slotProps), { root: Object.assign(Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root), { style: Object.assign(Object.assign(Object.assign({}, defaultRootProps), (_d = slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) === null || _d === void 0 ? void 0 : _d.style), { alignItems: "center", display: "flex" }) }), input: Object.assign(Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.input), { style: Object.assign(Object.assign({}, defaultInputProps), (_e = slotProps === null || slotProps === void 0 ? void 0 : slotProps.input) === null || _e === void 0 ? void 0 : _e.style) }) }) })));
@@ -25,0 +25,0 @@ });

core/index.js

@@ -18,5 +18,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 injectMergedStyles();
-const PhoneInput = forwardRef((_a, ref) => {
-    var { value: initialValue = "", variant = undefined, searchVariant = undefined, country = getDefaultISO2Code(), enableSearch = false, disableDropdown = false, onlyCountries = [], excludeCountries = [], preferredCountries = [], searchNotFound = "No country found", searchPlaceholder = "Search country", onMount: handleMount = () => null, onInput: handleInput = () => null, onChange: handleChange = () => null, onKeyDown: handleKeyDown = () => null } = _a, muiInputProps = __rest(_a, ["value", "variant", "searchVariant", "country", "enableSearch", "disableDropdown", "onlyCountries", "excludeCountries", "preferredCountries", "searchNotFound", "searchPlaceholder", "onMount", "onInput", "onChange", "onKeyDown"]);
+const PhoneInput = forwardRef((_a, forwardedRef) => {
+    var { value: initialValue = "", variant = undefined, searchVariant = undefined, country = getDefaultISO2Code(), disabled = false, enableSearch = false, disableDropdown = false, onlyCountries = [], excludeCountries = [], preferredCountries = [], searchNotFound = "No country found", searchPlaceholder = "Search country", onMount: handleMount = () => null, onInput: handleInput = () => null, onChange: handleChange = () => null, onKeyDown: handleKeyDown = () => null } = _a, muiInputProps = __rest(_a, ["value", "variant", "searchVariant", "country", "disabled", "enableSearch", "disableDropdown", "onlyCountries", "excludeCountries", "preferredCountries", "searchNotFound", "searchPlaceholder", "onMount", "onInput", "onChange", "onKeyDown"]);
     searchVariant = searchVariant || variant;
+    const inputRef = useRef(null);
     const searchRef = useRef(false);
@@ -62,2 +63,10 @@ const initiatedRef = useRef(false);
     }, [handleMount]);
+    const ref = useCallback((node) => {
+        [forwardedRef, inputRef].forEach((ref) => {
+            if (typeof ref === "function")
+                ref(node);
+            else if (ref != null)
+                ref.current = node;
+        });
+    }, [forwardedRef]);
     useEffect(() => {
@@ -77,13 +86,18 @@ if (initiatedRef.current)
     }, [countriesList, metadata, onMount, pattern, setValue, value]);
-    return (_jsxs("div", { className: "mui-phone-input-wrapper", ref: node => setMaxWidth((node === null || node === void 0 ? void 0 : node.offsetWidth) || 0), children: [!disableDropdown && (_jsx(Select, { open: open, variant: variant, value: selectValue, onClose: () => setOpen(searchRef.current), MenuProps: {
+    return (_jsxs("div", { className: "mui-phone-input-wrapper", ref: node => setMaxWidth((node === null || node === void 0 ? void 0 : node.offsetWidth) || 0), children: [(!disableDropdown && !disabled) && (_jsx(Select, { open: open, variant: variant, value: selectValue, onClose: () => setOpen(searchRef.current), MenuProps: {
                     getContentAnchorEl: null,
                     anchorOrigin: { vertical: "bottom", horizontal: "center" },
                     transformOrigin: { vertical: "top", horizontal: "center" },
-                }, style: { position: "absolute", top: 0, left: 0, visibility: "hidden", width: "100%", zIndex: -1 }, children: _jsxs("div", { className: "mui-phone-input-search-wrapper", onKeyDown: (e) => e.stopPropagation(), children: [enableSearch && (_jsx(TextField, { type: "search", value: query, variant: searchVariant, placeholder: searchPlaceholder, className: "mui-phone-input-search", onChange: (e) => setQuery(e.target.value), onBlur: () => searchRef.current = false, onFocus: () => searchRef.current = true })), _jsx("div", { className: "mui-phone-input-search-list", children: countriesList.length ? countriesList.map(([iso, name, dial, mask]) => (_jsx(MenuItem, { disableRipple: true, value: iso + dial, style: { maxWidth }, selected: selectValue === iso + dial, onClick: () => {
-                                    const selectedOption = iso + dial;
-                                    if (selectValue === selectedOption)
-                                        return;
-                                    setCountryCode(selectedOption.slice(0, 2));
-                                    setValue(getFormattedNumber(mask, mask));
-                                }, children: _jsxs("div", { className: "mui-phone-input-select-item", children: [_jsx("div", { className: `flag ${iso}` }), _jsxs("div", { className: "label", children: [name, "\u00A0", displayFormat(mask)] })] }) }, iso + mask))) : _jsx(MenuItem, { disabled: true, children: searchNotFound }) })] }) })), _jsx(TextField, Object.assign({ ref: ref, type: "tel", value: value, variant: variant, onInput: onInput, onChange: onChange, onKeyDown: onKeyDown, InputProps: {
+                }, style: { position: "absolute", top: 0, left: 0, visibility: "hidden", width: "100%", zIndex: -1 }, children: _jsxs("div", { className: "mui-phone-input-search-wrapper", onKeyDown: (e) => e.stopPropagation(), children: [enableSearch && (_jsx(TextField, { autoFocus: true, type: "search", value: query, variant: searchVariant, placeholder: searchPlaceholder, className: "mui-phone-input-search", onChange: (e) => setQuery(e.target.value), onBlur: () => searchRef.current = false, onFocus: () => searchRef.current = true })), _jsx("div", { className: "mui-phone-input-search-list", children: countriesList.length ? countriesList.map(([iso, name, dial, mask]) => (_jsx(MenuItem, { disableRipple: true, value: iso + dial, style: { maxWidth }, selected: selectValue === iso + dial, onClick: () => {
+                                    const formattedNumber = getFormattedNumber(mask, mask);
+                                    const input = inputRef.current.querySelector("input");
+                                    input.value = formattedNumber;
+                                    setValue(formattedNumber);
+                                    setCountryCode(iso);
+                                    setQuery("");
+                                    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set;
+                                    nativeInputValueSetter.call(input, formattedNumber);
+                                    input.dispatchEvent(new Event("change", { bubbles: true }));
+                                    setTimeout(() => input.focus(), 100);
+                                }, children: _jsxs("div", { className: "mui-phone-input-select-item", children: [_jsx("div", { className: `flag ${iso}` }), _jsxs("div", { className: "label", children: [name, "\u00A0", displayFormat(mask)] })] }) }, iso + mask))) : _jsx(MenuItem, { disabled: true, children: searchNotFound }) })] }) })), _jsx(TextField, Object.assign({ ref: ref, type: "tel", value: value, variant: variant, onInput: onInput, disabled: disabled, onChange: onChange, onKeyDown: onKeyDown, InputProps: {
                     startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx("span", { style: { cursor: "pointer" }, onClick: () => setOpen(!open), children: _jsx("div", { className: `flag ${countryCode}` }) }) }))
@@ -90,0 +104,0 @@ } }, muiInputProps))] }));

index.cjs.js

@@ -20,5 +20,6 @@ "use strict";
 (0, styles_1.injectMergedStyles)();
-const PhoneInput = (0, react_1.forwardRef)((_a, ref) => {
-    var { value: initialValue = "", variant = undefined, searchVariant = undefined, country = (0, react_phone_hooks_1.getDefaultISO2Code)(), enableSearch = false, disableDropdown = false, onlyCountries = [], excludeCountries = [], preferredCountries = [], searchNotFound = "No country found", searchPlaceholder = "Search country", onMount: handleMount = () => null, onInput: handleInput = () => null, onChange: handleChange = () => null, onKeyDown: handleKeyDown = () => null } = _a, muiInputProps = __rest(_a, ["value", "variant", "searchVariant", "country", "enableSearch", "disableDropdown", "onlyCountries", "excludeCountries", "preferredCountries", "searchNotFound", "searchPlaceholder", "onMount", "onInput", "onChange", "onKeyDown"]);
+const PhoneInput = (0, react_1.forwardRef)((_a, forwardedRef) => {
+    var { value: initialValue = "", variant = undefined, searchVariant = undefined, country = (0, react_phone_hooks_1.getDefaultISO2Code)(), disabled = false, enableSearch = false, disableDropdown = false, onlyCountries = [], excludeCountries = [], preferredCountries = [], searchNotFound = "No country found", searchPlaceholder = "Search country", onMount: handleMount = () => null, onInput: handleInput = () => null, onChange: handleChange = () => null, onKeyDown: handleKeyDown = () => null } = _a, muiInputProps = __rest(_a, ["value", "variant", "searchVariant", "country", "disabled", "enableSearch", "disableDropdown", "onlyCountries", "excludeCountries", "preferredCountries", "searchNotFound", "searchPlaceholder", "onMount", "onInput", "onChange", "onKeyDown"]);
     searchVariant = searchVariant || variant;
+    const inputRef = (0, react_1.useRef)(null);
     const searchRef = (0, react_1.useRef)(false);
@@ -64,2 +65,10 @@ const initiatedRef = (0, react_1.useRef)(false);
     }, [handleMount]);
+    const ref = (0, react_1.useCallback)((node) => {
+        [forwardedRef, inputRef].forEach((ref) => {
+            if (typeof ref === "function")
+                ref(node);
+            else if (ref != null)
+                ref.current = node;
+        });
+    }, [forwardedRef]);
     (0, react_1.useEffect)(() => {
@@ -79,9 +88,14 @@ if (initiatedRef.current)
     }, [countriesList, metadata, onMount, pattern, setValue, value]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "mui-phone-input-wrapper", ref: node => setMaxWidth((node === null || node === void 0 ? void 0 : node.offsetWidth) || 0), children: [!disableDropdown && ((0, jsx_runtime_1.jsx)(material_1.Select, { open: open, variant: variant, value: selectValue, onClose: () => setOpen(searchRef.current), style: { position: "absolute", top: 0, left: 0, visibility: "hidden", width: "100%", zIndex: -1 }, children: (0, jsx_runtime_1.jsxs)("div", { className: "mui-phone-input-search-wrapper", onKeyDown: (e) => e.stopPropagation(), children: [enableSearch && ((0, jsx_runtime_1.jsx)(material_1.TextField, { type: "search", value: query, variant: searchVariant, placeholder: searchPlaceholder, className: "mui-phone-input-search", onChange: (e) => setQuery(e.target.value), onBlur: () => searchRef.current = false, onFocus: () => searchRef.current = true })), (0, jsx_runtime_1.jsx)("div", { className: "mui-phone-input-search-list", children: countriesList.length ? countriesList.map(([iso, name, dial, mask]) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { disableRipple: true, value: iso + dial, style: { maxWidth }, selected: selectValue === iso + dial, onClick: () => {
-                                    const selectedOption = iso + dial;
-                                    if (selectValue === selectedOption)
-                                        return;
-                                    setCountryCode(selectedOption.slice(0, 2));
-                                    setValue((0, react_phone_hooks_1.getFormattedNumber)(mask, mask));
-                                }, children: (0, jsx_runtime_1.jsxs)("div", { className: "mui-phone-input-select-item", children: [(0, jsx_runtime_1.jsx)("div", { className: `flag ${iso}` }), (0, jsx_runtime_1.jsxs)("div", { className: "label", children: [name, "\u00A0", (0, react_phone_hooks_1.displayFormat)(mask)] })] }) }, iso + mask))) : (0, jsx_runtime_1.jsx)(material_1.MenuItem, { disabled: true, children: searchNotFound }) })] }) })), (0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({ ref: ref, type: "tel", value: value, variant: variant, onInput: onInput, onChange: onChange, onKeyDown: onKeyDown, InputProps: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "mui-phone-input-wrapper", ref: node => setMaxWidth((node === null || node === void 0 ? void 0 : node.offsetWidth) || 0), children: [(!disableDropdown && !disabled) && ((0, jsx_runtime_1.jsx)(material_1.Select, { open: open, variant: variant, value: selectValue, onClose: () => setOpen(searchRef.current), style: { position: "absolute", top: 0, left: 0, visibility: "hidden", width: "100%", zIndex: -1 }, children: (0, jsx_runtime_1.jsxs)("div", { className: "mui-phone-input-search-wrapper", onKeyDown: (e) => e.stopPropagation(), children: [enableSearch && ((0, jsx_runtime_1.jsx)(material_1.TextField, { autoFocus: true, type: "search", value: query, variant: searchVariant, placeholder: searchPlaceholder, className: "mui-phone-input-search", onChange: (e) => setQuery(e.target.value), onBlur: () => searchRef.current = false, onFocus: () => searchRef.current = true })), (0, jsx_runtime_1.jsx)("div", { className: "mui-phone-input-search-list", children: countriesList.length ? countriesList.map(([iso, name, dial, mask]) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { disableRipple: true, value: iso + dial, style: { maxWidth }, selected: selectValue === iso + dial, onClick: () => {
+                                    const formattedNumber = (0, react_phone_hooks_1.getFormattedNumber)(mask, mask);
+                                    const input = inputRef.current.querySelector("input");
+                                    input.value = formattedNumber;
+                                    setValue(formattedNumber);
+                                    setCountryCode(iso);
+                                    setQuery("");
+                                    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set;
+                                    nativeInputValueSetter.call(input, formattedNumber);
+                                    input.dispatchEvent(new Event("change", { bubbles: true }));
+                                    setTimeout(() => input.focus(), 100);
+                                }, children: (0, jsx_runtime_1.jsxs)("div", { className: "mui-phone-input-select-item", children: [(0, jsx_runtime_1.jsx)("div", { className: `flag ${iso}` }), (0, jsx_runtime_1.jsxs)("div", { className: "label", children: [name, "\u00A0", (0, react_phone_hooks_1.displayFormat)(mask)] })] }) }, iso + mask))) : (0, jsx_runtime_1.jsx)(material_1.MenuItem, { disabled: true, children: searchNotFound }) })] }) })), (0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({ ref: ref, type: "tel", value: value, variant: variant, onInput: onInput, disabled: disabled, onChange: onChange, onKeyDown: onKeyDown, InputProps: {
                     startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "start", children: (0, jsx_runtime_1.jsx)("span", { style: { cursor: "pointer" }, onClick: () => setOpen(!open), children: (0, jsx_runtime_1.jsx)("div", { className: `flag ${countryCode}` }) }) }))
@@ -88,0 +102,0 @@ } }, muiInputProps))] }));

index.js

@@ -18,5 +18,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 injectMergedStyles();
-const PhoneInput = forwardRef((_a, ref) => {
-    var { value: initialValue = "", variant = undefined, searchVariant = undefined, country = getDefaultISO2Code(), enableSearch = false, disableDropdown = false, onlyCountries = [], excludeCountries = [], preferredCountries = [], searchNotFound = "No country found", searchPlaceholder = "Search country", onMount: handleMount = () => null, onInput: handleInput = () => null, onChange: handleChange = () => null, onKeyDown: handleKeyDown = () => null } = _a, muiInputProps = __rest(_a, ["value", "variant", "searchVariant", "country", "enableSearch", "disableDropdown", "onlyCountries", "excludeCountries", "preferredCountries", "searchNotFound", "searchPlaceholder", "onMount", "onInput", "onChange", "onKeyDown"]);
+const PhoneInput = forwardRef((_a, forwardedRef) => {
+    var { value: initialValue = "", variant = undefined, searchVariant = undefined, country = getDefaultISO2Code(), disabled = false, enableSearch = false, disableDropdown = false, onlyCountries = [], excludeCountries = [], preferredCountries = [], searchNotFound = "No country found", searchPlaceholder = "Search country", onMount: handleMount = () => null, onInput: handleInput = () => null, onChange: handleChange = () => null, onKeyDown: handleKeyDown = () => null } = _a, muiInputProps = __rest(_a, ["value", "variant", "searchVariant", "country", "disabled", "enableSearch", "disableDropdown", "onlyCountries", "excludeCountries", "preferredCountries", "searchNotFound", "searchPlaceholder", "onMount", "onInput", "onChange", "onKeyDown"]);
     searchVariant = searchVariant || variant;
+    const inputRef = useRef(null);
     const searchRef = useRef(false);
@@ -62,2 +63,10 @@ const initiatedRef = useRef(false);
     }, [handleMount]);
+    const ref = useCallback((node) => {
+        [forwardedRef, inputRef].forEach((ref) => {
+            if (typeof ref === "function")
+                ref(node);
+            else if (ref != null)
+                ref.current = node;
+        });
+    }, [forwardedRef]);
     useEffect(() => {
@@ -77,9 +86,14 @@ if (initiatedRef.current)
     }, [countriesList, metadata, onMount, pattern, setValue, value]);
-    return (_jsxs("div", { className: "mui-phone-input-wrapper", ref: node => setMaxWidth((node === null || node === void 0 ? void 0 : node.offsetWidth) || 0), children: [!disableDropdown && (_jsx(Select, { open: open, variant: variant, value: selectValue, onClose: () => setOpen(searchRef.current), style: { position: "absolute", top: 0, left: 0, visibility: "hidden", width: "100%", zIndex: -1 }, children: _jsxs("div", { className: "mui-phone-input-search-wrapper", onKeyDown: (e) => e.stopPropagation(), children: [enableSearch && (_jsx(TextField, { type: "search", value: query, variant: searchVariant, placeholder: searchPlaceholder, className: "mui-phone-input-search", onChange: (e) => setQuery(e.target.value), onBlur: () => searchRef.current = false, onFocus: () => searchRef.current = true })), _jsx("div", { className: "mui-phone-input-search-list", children: countriesList.length ? countriesList.map(([iso, name, dial, mask]) => (_jsx(MenuItem, { disableRipple: true, value: iso + dial, style: { maxWidth }, selected: selectValue === iso + dial, onClick: () => {
-                                    const selectedOption = iso + dial;
-                                    if (selectValue === selectedOption)
-                                        return;
-                                    setCountryCode(selectedOption.slice(0, 2));
-                                    setValue(getFormattedNumber(mask, mask));
-                                }, children: _jsxs("div", { className: "mui-phone-input-select-item", children: [_jsx("div", { className: `flag ${iso}` }), _jsxs("div", { className: "label", children: [name, "\u00A0", displayFormat(mask)] })] }) }, iso + mask))) : _jsx(MenuItem, { disabled: true, children: searchNotFound }) })] }) })), _jsx(TextField, Object.assign({ ref: ref, type: "tel", value: value, variant: variant, onInput: onInput, onChange: onChange, onKeyDown: onKeyDown, InputProps: {
+    return (_jsxs("div", { className: "mui-phone-input-wrapper", ref: node => setMaxWidth((node === null || node === void 0 ? void 0 : node.offsetWidth) || 0), children: [(!disableDropdown && !disabled) && (_jsx(Select, { open: open, variant: variant, value: selectValue, onClose: () => setOpen(searchRef.current), style: { position: "absolute", top: 0, left: 0, visibility: "hidden", width: "100%", zIndex: -1 }, children: _jsxs("div", { className: "mui-phone-input-search-wrapper", onKeyDown: (e) => e.stopPropagation(), children: [enableSearch && (_jsx(TextField, { autoFocus: true, type: "search", value: query, variant: searchVariant, placeholder: searchPlaceholder, className: "mui-phone-input-search", onChange: (e) => setQuery(e.target.value), onBlur: () => searchRef.current = false, onFocus: () => searchRef.current = true })), _jsx("div", { className: "mui-phone-input-search-list", children: countriesList.length ? countriesList.map(([iso, name, dial, mask]) => (_jsx(MenuItem, { disableRipple: true, value: iso + dial, style: { maxWidth }, selected: selectValue === iso + dial, onClick: () => {
+                                    const formattedNumber = getFormattedNumber(mask, mask);
+                                    const input = inputRef.current.querySelector("input");
+                                    input.value = formattedNumber;
+                                    setValue(formattedNumber);
+                                    setCountryCode(iso);
+                                    setQuery("");
+                                    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set;
+                                    nativeInputValueSetter.call(input, formattedNumber);
+                                    input.dispatchEvent(new Event("change", { bubbles: true }));
+                                    setTimeout(() => input.focus(), 100);
+                                }, children: _jsxs("div", { className: "mui-phone-input-select-item", children: [_jsx("div", { className: `flag ${iso}` }), _jsxs("div", { className: "label", children: [name, "\u00A0", displayFormat(mask)] })] }) }, iso + mask))) : _jsx(MenuItem, { disabled: true, children: searchNotFound }) })] }) })), _jsx(TextField, Object.assign({ ref: ref, type: "tel", value: value, variant: variant, onInput: onInput, disabled: disabled, onChange: onChange, onKeyDown: onKeyDown, InputProps: {
                     startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx("span", { style: { cursor: "pointer" }, onClick: () => setOpen(!open), children: _jsx("div", { className: `flag ${countryCode}` }) }) }))
@@ -86,0 +100,0 @@ } }, muiInputProps))] }));

joy/index.js

@@ -18,5 +18,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 injectMergedStyles();
-const PhoneInput = forwardRef((_a, ref) => {
-    var { value: initialValue = "", variant = undefined, searchVariant = undefined, country = getDefaultISO2Code(), enableSearch = false, disableDropdown = false, onlyCountries = [], excludeCountries = [], preferredCountries = [], searchNotFound = "No country found", searchPlaceholder = "Search country", onMount: handleMount = () => null, onInput: handleInput = () => null, onChange: handleChange = () => null, onKeyDown: handleKeyDown = () => null } = _a, muiInputProps = __rest(_a, ["value", "variant", "searchVariant", "country", "enableSearch", "disableDropdown", "onlyCountries", "excludeCountries", "preferredCountries", "searchNotFound", "searchPlaceholder", "onMount", "onInput", "onChange", "onKeyDown"]);
+const PhoneInput = forwardRef((_a, forwardedRef) => {
+    var { value: initialValue = "", variant = undefined, searchVariant = undefined, country = getDefaultISO2Code(), disabled = false, enableSearch = false, disableDropdown = false, onlyCountries = [], excludeCountries = [], preferredCountries = [], searchNotFound = "No country found", searchPlaceholder = "Search country", onMount: handleMount = () => null, onInput: handleInput = () => null, onChange: handleChange = () => null, onKeyDown: handleKeyDown = () => null } = _a, muiInputProps = __rest(_a, ["value", "variant", "searchVariant", "country", "disabled", "enableSearch", "disableDropdown", "onlyCountries", "excludeCountries", "preferredCountries", "searchNotFound", "searchPlaceholder", "onMount", "onInput", "onChange", "onKeyDown"]);
     searchVariant = searchVariant || variant;
+    const inputRef = useRef(null);
     const searchRef = useRef(false);
@@ -62,2 +63,10 @@ const initiatedRef = useRef(false);
     }, [handleMount]);
+    const ref = useCallback((node) => {
+        [forwardedRef, inputRef].forEach((ref) => {
+            if (typeof ref === "function")
+                ref(node);
+            else if (ref != null)
+                ref.current = node;
+        });
+    }, [forwardedRef]);
     useEffect(() => {
@@ -77,10 +86,15 @@ if (initiatedRef.current)
     }, [countriesList, metadata, onMount, pattern, setValue, value]);
-    return (_jsxs("div", { className: "mui-phone-input-wrapper", ref: node => setMaxWidth((node === null || node === void 0 ? void 0 : node.offsetWidth) || 0), children: [!disableDropdown && (_jsx(Select, { variant: variant, listboxOpen: open, value: selectValue, onClose: () => setOpen(searchRef.current), style: { position: "absolute", top: 0, left: 0, visibility: "hidden", width: "100%", zIndex: -1 }, children: _jsxs("div", { className: "mui-phone-input-search-wrapper", onKeyDown: (e) => e.stopPropagation(), children: [enableSearch && (_jsx(Input, { type: "search", value: query, variant: searchVariant, placeholder: searchPlaceholder, className: "mui-phone-input-search", onChange: (e) => setQuery(e.target.value), onBlur: () => searchRef.current = false, onFocus: () => searchRef.current = true })), _jsx("div", { className: "mui-phone-input-search-list", children: countriesList.length ? countriesList.map(([iso, name, dial, mask]) => (_jsx(Option, { style: { maxWidth }, value: iso + dial, onClick: () => {
-                                    const selectedOption = iso + dial;
-                                    if (selectValue === selectedOption)
-                                        return;
-                                    setCountryCode(selectedOption.slice(0, 2));
-                                    setValue(getFormattedNumber(mask, mask));
-                                }, children: _jsxs("div", { className: "mui-phone-input-select-item", children: [_jsx("div", { className: `flag ${iso}` }), _jsxs("div", { className: "label", children: [name, "\u00A0", displayFormat(mask)] })] }) }, iso + mask))) : _jsx(Option, { value: "N/A", disabled: true, children: searchNotFound }) })] }) })), _jsx(Input, Object.assign({ ref: ref, type: "tel", value: value, variant: variant, onInput: onInput, onChange: onChange, onKeyDown: onKeyDown, startDecorator: (_jsx("span", { style: { cursor: "pointer" }, onClick: () => setOpen(!open), children: _jsx("div", { className: `flag ${countryCode}` }) })) }, muiInputProps))] }));
+    return (_jsxs("div", { className: "mui-phone-input-wrapper", ref: node => setMaxWidth((node === null || node === void 0 ? void 0 : node.offsetWidth) || 0), children: [(!disableDropdown && !disabled) && (_jsx(Select, { variant: variant, listboxOpen: open, value: selectValue, onClose: () => setOpen(searchRef.current), style: { position: "absolute", top: 0, left: 0, visibility: "hidden", width: "100%", zIndex: -1 }, children: _jsxs("div", { className: "mui-phone-input-search-wrapper", onKeyDown: (e) => e.stopPropagation(), children: [enableSearch && (_jsx(Input, { type: "search", value: query, variant: searchVariant, placeholder: searchPlaceholder, className: "mui-phone-input-search", onChange: (e) => setQuery(e.target.value), onBlur: () => searchRef.current = false, onFocus: () => searchRef.current = true })), _jsx("div", { className: "mui-phone-input-search-list", children: countriesList.length ? countriesList.map(([iso, name, dial, mask]) => (_jsx(Option, { style: { maxWidth }, value: iso + dial, onClick: () => {
+                                    const formattedNumber = getFormattedNumber(mask, mask);
+                                    const input = inputRef.current.querySelector("input");
+                                    input.value = formattedNumber;
+                                    setValue(formattedNumber);
+                                    setCountryCode(iso);
+                                    setQuery("");
+                                    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set;
+                                    nativeInputValueSetter.call(input, formattedNumber);
+                                    input.dispatchEvent(new Event("change", { bubbles: true }));
+                                    setTimeout(() => input.focus(), 100);
+                                }, children: _jsxs("div", { className: "mui-phone-input-select-item", children: [_jsx("div", { className: `flag ${iso}` }), _jsxs("div", { className: "label", children: [name, "\u00A0", displayFormat(mask)] })] }) }, iso + mask))) : _jsx(Option, { value: "N/A", disabled: true, children: searchNotFound }) })] }) })), _jsx(Input, Object.assign({ ref: ref, type: "tel", value: value, variant: variant, onInput: onInput, disabled: disabled, onChange: onChange, onKeyDown: onKeyDown, startDecorator: (_jsx("span", { style: { cursor: "pointer" }, onClick: () => setOpen(!open), children: _jsx("div", { className: `flag ${countryCode}` }) })) }, muiInputProps))] }));
 });
 export default PhoneInput;

package.json

 {
-  "version": "0.1.0",
+  "version": "0.1.1",
   "name": "mui-phone-input",
@@ -50,3 +50,3 @@ "description": "Advanced, highly customizable phone input component for Material UI.",
   "dependencies": {
-    "react-phone-hooks": "0.1.0-beta.1"
+    "react-phone-hooks": "^0.1.4"
   },
@@ -53,0 +53,0 @@ "devDependencies": {

README.md

 # MUI Phone Input <img src="https://github.com/typesnippet.png" align="right" height="64" />
 
 [![npm](https://img.shields.io/npm/v/mui-phone-input)](https://www.npmjs.com/package/mui-phone-input)
+[![Playground](https://img.shields.io/badge/playground-blue.svg?logo=data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzEzNTE0OTc5MTUzIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjE2MjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTc2OCA1MDYuMDI2NjY3djExLjk0NjY2NmEzMi40MjY2NjcgMzIuNDI2NjY3IDAgMCAxLTE1Ljc4NjY2NyAyNy43MzMzMzRMMzcwLjM0NjY2NyA3NjhjLTIzLjA0IDEzLjY1MzMzMy0zNC45ODY2NjcgMTMuNjUzMzMzLTQ1LjIyNjY2NyA3LjY4bC0xMC42NjY2NjctNS45NzMzMzNhMzIuNDI2NjY3IDMyLjQyNjY2NyAwIDAgMS0xNS43ODY2NjYtMjYuODhWMjgxLjE3MzMzM2EzMi40MjY2NjcgMzIuNDI2NjY3IDAgMCAxIDE1Ljc4NjY2Ni0yNy43MzMzMzNsMTAuNjY2NjY3LTUuOTczMzMzYzEwLjI0LTUuOTczMzMzIDIyLjE4NjY2Ny01Ljk3MzMzMyA1Mi4wNTMzMzMgMTEuNTJsMzc1LjA0IDIxOS4zMDY2NjZhMzIuNDI2NjY3IDMyLjQyNjY2NyAwIDAgMSAxNS43ODY2NjcgMjcuNzMzMzM0eiIgcC1pZD0iMTYyOCIgZGF0YS1zcG0tYW5jaG9yLWlkPSJhMzEzeC5zZWFyY2hfaW5kZXguMC5pMS40NzE5M2E4MVdiYjYyWiIgY2xhc3M9IiIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==)](https://playground.typesnippet.org/mui-phone-input/)
 [![distro](https://img.shields.io/badge/distro-core%20|%20material%20|%20base%20|%20joy-blue)](https://mui.com/)
@@ -9,4 +10,10 @@ [![types](https://img.shields.io/npm/types/mui-phone-input)](https://www.npmjs.com/package/mui-phone-input)
 
-Advanced phone input component for Material UI that leverages the [react-phone-hooks](https://www.npmjs.com/package/react-phone-hooks) supporting all countries. The package is compatible with [@material-ui/core](https://v4.mui.com/), [@mui/material](https://mui.com/), [@mui/base](https://mui.com/base-ui/getting-started/) and [@mui/joy](https://mui.com/joy-ui/getting-started/) distributions. It provides built-in support for area codes and strict validation.
+<p>Advanced phone input component for Material UI that leverages the <a href="https://www.npmjs.com/package/react-phone-hooks">react-phone-hooks</a> supporting all countries. The package is compatible with <a href="https://v4.mui.com/">@material-ui/core</a>, <a href="https://mui.com/">@mui/material</a>, <a href="https://mui.com/base-ui/getting-started/">@mui/base</a> and <a href="https://mui.com/joy-ui/getting-started/">@mui/joy</a> distributions. It provides built-in support for area codes and strict validation.</p>
 
+<p align="center">
+  <a href="https://playground.typesnippet.org/mui-phone-input">
+    <img src="https://github.com/typesnippet/mui-phone-input/assets/44609997/71a747c1-6682-488c-aa7f-01b47a228f8a" alt="MUI Phone Input"/>
+  </a>
+</p>
+
 ## Value
@@ -80,2 +87,3 @@
 | enableSearch       | Enables search in the country selection dropdown menu. Default value is `false`.                                              | boolean                   |
+| searchVariant      | Accepts an Input variant, and values depend on the chosen Material distribution.                                              | TextFieldVariants         |
 | searchNotFound     | The value is shown if `enableSearch` is `true` and the query does not match any country. Default value is `No country found`. | string                    |
@@ -82,0 +90,0 @@ | searchPlaceholder  | The value is shown if `enableSearch` is `true`. Default value is `Search country`.                                            | string                    |

resources/stylesheet.json

@@ -28,4 +28,4 @@ {
     "position": "sticky",
-    "max-height": "400px"
+    "max-height": "260px"
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

53989

increased by10.78%

Lines of code

658

increased by9.3%

Number of lines in readme file

103

increased by8.42%

Dependency changes

• + Addedreact-phone-hooks@0.1.12(transitive)

• - Removedreact-phone-hooks@0.1.0-beta.1(transitive)

• Updatedreact-phone-hooks@^0.1.4