fixed issue with onBlur/onFocus not interacting properly.

added width prop.
replaysMike · Feb 13, 2024 · c869a7b · c869a7b
1 parent 7828196
commit c869a7b
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-country-state-dropdown",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "A country, state, city, and language dropdown for React",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",

diff --git a/src/CityDropdown.js b/src/CityDropdown.js
@@ -56,6 +56,8 @@ const CityDropdown = ({
   /** add classes to the prioritized items container */
   prioritizedClassName = '',
   tabIndex,
+  title,
+  width,
   ...rest
 }) => {
 
@@ -159,6 +161,8 @@ const CityDropdown = ({
       itemsClassName={itemsClassName}
       itemClassName={itemClassName}
       tabIndex={tabIndex}
+      title={title}
+      width={width}
       {...rest}
       onRenderEmpty={() => selectedCountry ? (selectedState ? emptyLabel : noStateLabel) : noCountryLabel }
       onRenderMenu={(itemRenderer, selected, isFiltered, striped, handleItemSelect) => {

diff --git a/src/CountryDropdown.js b/src/CountryDropdown.js
@@ -53,6 +53,8 @@ const CountryDropdown = ({
   /** add classes to the prioritized items container */
   prioritizedClassName = '',
   tabIndex,
+  title,
+  width,
   ...rest
 }) => {
 
@@ -124,15 +126,18 @@ const CountryDropdown = ({
       itemClassName={itemClassName}
       tabIndex={tabIndex}
       title={title}
+      width={width}
       {...rest}
-      onRenderInput={(option, ref, value, placeHolder, onChangeHandler) => {
+      onRenderInput={(option, ref, value, placeHolder, onChangeHandler, onFocus, onBlur) => {
         return (<div className='wrapped-input'>{showFlags && option && <i className={`${option.iso2.toLowerCase()} flag`} />}<input
           className={`dropdown ${inputClassName}`}
           aria-autocomplete="list"
           autoComplete="new-password"
           onChange={onChangeHandler}
           value={value || ''}
           ref={ref}
+          onFocus={onFocus}
+          onBlur={onBlur}
           {...(placeHolder ? { placeholder: placeHolder } : {})}
           {...(disabled ? { disabled } : {})}
           {...(tabIndex && tabIndex > 0 ? { tabIndex } : {})}

diff --git a/src/Dropdown.js b/src/Dropdown.js
@@ -50,6 +50,9 @@ const Dropdown = ({
   itemClassName = '',
   tabIndex,
   title,
+  onFocus,
+  onBlur,
+  width,
   ...rest
 }) => {
 
@@ -103,10 +106,10 @@ const Dropdown = ({
     setInternalSelectedItem(selectedItem);
   }, [value, internalOptions]);
 
-  const handleInputClick = () => {
+  const handleInputClick = (e) => {
     if (disabled) return;
 
-    setMenuIsOpen(!menuIsOpen);
+    setMenuIsOpen(true);
   };
 
   const handleTextInputChange = (e) => {
@@ -128,6 +131,7 @@ const Dropdown = ({
     if (allowFreeFormText) {
       if (onChange) onChange(e, e.target.value);
     }
+    if (onSearchInputChange) onSearchInputChange(e);
   };
 
   const handleItemSelect = (e, option) => {
@@ -149,6 +153,19 @@ const Dropdown = ({
     if (onChange) onChange(e, null);
   };
 
+  const handleFocus = (e) => {
+    setMenuIsOpen(true);
+    if (onFocus) onFocus(e);
+  };
+
+  const handleBlur = (e) => {
+    // if we close the menu immediately, we won't receive a select event
+    setTimeout(() => {
+      setMenuIsOpen(false);
+    }, 100);
+    if (onBlur) onBlur(e);
+  };
+
   const renderMenuInternal = () => {
     if (onRenderMenu) return onRenderMenu(renderItemInternal, internalSelectedItem, isFiltered, striped, handleItemSelect);
     return (<div className={`menu ${menuClassName}`}><div className={`items${striped ? ' striped' : ''} ${itemsClassName}`}>{renderItemInternal()}</div></div>);
@@ -170,14 +187,16 @@ const Dropdown = ({
   };
 
   const renderInputInternal = () => {
-    if (onRenderInput) return onRenderInput(internalSelectedItem, searchRef, internalValue, placeHolder, handleTextInputChange);
+    if (onRenderInput) return onRenderInput(internalSelectedItem, searchRef, internalValue, placeHolder, handleTextInputChange, handleFocus, handleBlur);
     return <input
       className={`dropdown ${inputClassName}`}
       aria-autocomplete="list"
       autoComplete="new-password"
       onChange={handleTextInputChange}
       value={internalValue || ''}
       ref={searchRef}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
       {...(placeHolder ? { placeholder: placeHolder } : {})}
       {...(disabled ? { disabled } : {})}
       {...(tabIndex && tabIndex > 0 ? {tabIndex} : {})}
@@ -186,7 +205,7 @@ const Dropdown = ({
   };
 
   return (
-    <div className={`rcsd rcsd-dropdown${disabled ? ' disabled' : ''} ${className}`} {...rest}>
+    <div className={`rcsd rcsd-dropdown${disabled ? ' disabled' : ''} ${className}`} {...(width ? { style: { width: `${width}px` } } : {})} {...rest}>
       <div className={`rcsd-input ${inputContainerClassName}`} ref={inputRef} onClick={handleInputClick}>
         {renderInputInternal()}
         {clearable && (internalSelectedItem || (allowFreeFormText && value?.length > 0)) && <i aria-hidden="true" className="clear" onClick={handleClear} />}

diff --git a/src/LanguageDropdown.js b/src/LanguageDropdown.js
@@ -48,6 +48,7 @@ const LanguageDropdown = ({
   prioritizedClassName = '',
   tabIndex,
   title,
+  width,
   ...rest
 }) => {
 
@@ -118,6 +119,7 @@ const LanguageDropdown = ({
       itemClassName={itemClassName}
       tabIndex={tabIndex}
       title={title}
+      width={width}
       {...rest}
       onRenderMenu={(itemRenderer, selected, isFiltered, striped, handleItemSelect) => {
         return <div className={`menu ${menuClassName}`}>

diff --git a/src/PhoneInput.js b/src/PhoneInput.js
@@ -46,6 +46,7 @@ const PhoneInput = ({
   prioritizedClassName = '',
   tabIndex,
   title,
+  width,
   ...rest
 }) => {
   const [countries, setCountries] = useState([]);
@@ -135,15 +136,18 @@ const PhoneInput = ({
         itemClassName={itemClassName}
         tabIndex={tabIndex}
         title={title}
+        width={width}
         {...rest}
-        onRenderInput={(option, ref, value, placeHolder, onChangeHandler) => {
+        onRenderInput={(option, ref, value, placeHolder, onChangeHandler, onFocus, onBlur) => {
           return (<>{showFlags && option && <i className={`${option.iso2.toLowerCase()} flag`} />}<input
             className={`dropdown ${dropdownInputClassName}`}
             aria-autocomplete="list"
             autoComplete="new-password"
             onChange={onChangeHandler}
             value={option && option.phone_code && `+${option.phone_code}` || ''}
             ref={ref}
+            onFocus={onFocus}
+            onBlur={onBlur}
             {...(placeHolder ? { placeholder: placeHolder } : {})}
             {...(disabled ? { disabled } : {})}
             {...(tabIndex && tabIndex > 0 ? { tabIndex } : {})}

diff --git a/src/StateDropdown.js b/src/StateDropdown.js
@@ -52,6 +52,7 @@ const StateDropdown = ({
   prioritizedClassName = '',
   tabIndex,
   title,
+  width,
   ...rest
 }) => {
 
@@ -137,6 +138,7 @@ const StateDropdown = ({
       itemClassName={itemClassName}
       tabIndex={tabIndex}
       title={title}
+      width={width}
       {...rest}
       onRenderEmpty={() => selectedCountry ? emptyLabel : noCountryLabel}
       onRenderMenu={(itemRenderer, selected, isFiltered, striped, handleItemSelect) => {

diff --git a/src/styles.css b/src/styles.css
@@ -19,6 +19,14 @@
   border: 1px solid #96c8da;
 }
 
+.rcsd.rcsd-dropdown .rcsd-input:has(input:active:hover) {
+  color: #aaa;
+}
+
+.rcsd.rcsd-dropdown .rcsd-input input:active:hover {
+  color: #aaa;
+}
+
 .rcsd.rcsd-dropdown .rcsd-input {
   border: 1px solid #ccc;
   border-radius: 5px;