fix: nested components in CountryField (#851)

.eslintrc.js

@@ -48,6 +48,5 @@ module.exports = createConfig('eslint', {
       },
     ],
     'function-paren-newline': 'off',
-    'react/no-unstable-nested-components': 'off',
   },
 });

src/register/data/constants.js

@@ -173,3 +173,6 @@ export const DEFAULT_TOP_LEVEL_DOMAINS = [
 
 export const COUNTRY_CODE_KEY = 'code';
 export const COUNTRY_DISPLAY_KEY = 'name';
+
+export const EXPAND_MORE_ICON = 'expand-more';
+export const EXPAND_LESS_ICON = 'expand-less';

src/register/registrationFields/CountryField.jsx

@@ -6,7 +6,9 @@ import { ExpandLess, ExpandMore } from '@edx/paragon/icons';
 import PropTypes from 'prop-types';
 
 import { FormGroup } from '../../common-components';
-import { COUNTRY_CODE_KEY, COUNTRY_DISPLAY_KEY } from '../data/constants';
+import {
+  COUNTRY_CODE_KEY, COUNTRY_DISPLAY_KEY, EXPAND_LESS_ICON, EXPAND_MORE_ICON,
+} from '../data/constants';
 import messages from '../messages';
 
 const CountryField = (props) => {
@@ -17,7 +19,7 @@ const CountryField = (props) => {
   const [errorMessage, setErrorMessage] = useState(props.errorMessage);
   const [dropDownItems, setDropDownItems] = useState([]);
   const [displayValue, setDisplayValue] = useState('');
-  const [trailingIcon, setTrailingIcon] = useState(null);
+  const [trailingIcon, setTrailingIcon] = useState(EXPAND_MORE_ICON);
 
   const onBlurHandler = (event, itemClicked = false, countryName = '') => {
     const { name } = event.target;
@@ -31,7 +33,7 @@ const CountryField = (props) => {
     if (props.onBlurHandler) {
       props.onBlurHandler({ target: { name: 'country', value: countryValue } });
     }
-    setTrailingIcon(<ExpandMoreButton />);
+    setTrailingIcon(EXPAND_MORE_ICON);
     setDropDownItems([]);
   };
 
@@ -67,7 +69,7 @@ const CountryField = (props) => {
   const onFocusHandler = (event) => {
     const { name, value } = event.target;
     setDropDownItems(getDropdownItems(name === 'country' ? value : displayValue));
-    setTrailingIcon(<ExpandLessButton />);
+    setTrailingIcon(EXPAND_LESS_ICON);
     setErrorMessage('');
     if (props.onFocusHandler) { props.onFocusHandler(event); }
   };
@@ -80,50 +82,20 @@ const CountryField = (props) => {
   };
 
   const handleOnClickOutside = () => {
-    setTrailingIcon(<ExpandMoreButton />);
+    setTrailingIcon(EXPAND_MORE_ICON);
     setDropDownItems([]);
   };
 
-  const handleExpandMore = () => {
-    setTrailingIcon(<ExpandLessButton />);
-    setDropDownItems(getDropdownItems());
+  const handleTrailingIconClick = () => {
+    if (trailingIcon === EXPAND_MORE_ICON) {
+      setDropDownItems(getDropdownItems());
+      setTrailingIcon(EXPAND_LESS_ICON);
+    } else {
+      setDropDownItems([]);
+      setTrailingIcon(EXPAND_MORE_ICON);
+    }
   };
 
-  const handleExpandLess = () => {
-    setTrailingIcon(<ExpandMoreButton />);
-    setDropDownItems([]);
-  };
-
-  const ExpandMoreButton = () => (
-    <IconButton
-      name="countryExpand"
-      size="sm"
-      variant="secondary"
-      alt="expand-more"
-      className="expand-more"
-      iconAs={Icon}
-      src={ExpandMore}
-      onBlur={() => {}}
-      onClick={handleExpandMore}
-      onFocus={() => {}}
-    />
-  );
-
-  const ExpandLessButton = () => (
-    <IconButton
-      name="countryExpand"
-      size="sm"
-      variant="secondary"
-      alt="expand-less"
-      className="expand-less"
-      iconAs={Icon}
-      src={ExpandLess}
-      onBlur={() => {}}
-      onClick={handleExpandLess}
-      onFocus={() => {}}
-    />
-  );
-
   useEffect(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
@@ -136,12 +108,6 @@ const CountryField = (props) => {
     };
   }, []);
 
-  useEffect(() => {
-    if (!trailingIcon) {
-      setTrailingIcon(<ExpandMoreButton />);
-    }
-  }, [trailingIcon]);
-
   useEffect(() => {
     if (selectedCountry.displayValue) {
       setDisplayValue(selectedCountry.displayValue);
@@ -160,7 +126,19 @@ const CountryField = (props) => {
         autoComplete="chrome-off"
         className="mb-0"
         floatingLabel={formatMessage(messages['registration.country.label'])}
-        trailingElement={trailingIcon}
+        trailingElement={(
+          <IconButton
+            name="countryExpand"
+            size="sm"
+            variant="secondary"
+            alt="expand-dropdown"
+            iconAs={Icon}
+            src={trailingIcon === EXPAND_MORE_ICON ? ExpandMore : ExpandLess}
+            onBlur={() => {}}
+            onClick={handleTrailingIconClick}
+            onFocus={() => {}}
+          />
+        )}
         value={displayValue}
         errorMessage={errorMessage}
         handleChange={onChangeHandler}

src/register/tests/RegistrationPage.test.jsx

@@ -1140,7 +1140,7 @@ describe('RegistrationPage', () => {
       registrationPage.find('button.btn-brand').simulate('click');
       expect(registrationPage.find('div[feedback-for="name"]').exists()).toBeTruthy();
 
-      registrationPage.find('button.expand-more').simulate('click');
+      registrationPage.find('button[name="countryExpand"]').simulate('click');
       registrationPage.find('button.dropdown-item').at(0).simulate('click', { target: { value: 'Pakistan', name: 'countryItem' } });
       expect(registrationPage.find('div[feedback-for="name"]').exists()).toBeTruthy();
     });