Merge pull request #2305 from openedx/master

sync: master to alpha
openedx · May 16, 2023 · 177c219 · 177c219
2 parents 880a92f + 8988f11
commit 177c219
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 46 deletions.
diff --git a/package.json b/package.json
@@ -31,7 +31,7 @@
     "commit": "commit",
     "debug-test": "node --inspect-brk node_modules/.bin/jest --runInBand --coverage",
     "stylelint": "stylelint \"src/**/*.scss\" \"scss/**/*.scss\" \"www/src/**/*.scss\" --config .stylelintrc.json",
-    "lint": "npm run stylelint && eslint --ext .js --ext .jsx --ext .ts --ext .tsx && npm run lint --workspaces --if-present",
+    "lint": "npm run stylelint && eslint --ext .js --ext .jsx --ext .ts --ext .tsx . && npm run lint --workspaces --if-present",
     "prepublishOnly": "npm run build",
     "semantic-release": "semantic-release",
     "snapshot": "jest --updateSnapshot",

diff --git a/src/Form/FormAutosuggest.jsx b/src/Form/FormAutosuggest.jsx
@@ -38,25 +38,17 @@ function FormAutosuggest({
     dropDownItems: [],
   });
 
-  const setValue = (itemValue, optValue) => {
-    if (value === itemValue) { return; }
+  const handleItemClick = (e, onClick) => {
+    const clickedValue = e.currentTarget.value;
 
-    if (onSelected) { onSelected(itemValue); }
-
-    if (optValue !== state.displayValue) {
-      setState(prevState => ({
-        ...prevState,
-        displayValue: optValue,
-      }));
+    if (onSelected && clickedValue !== value) {
+      onSelected(clickedValue);
     }
-  };
-
-  const handleItemClick = (e, optValue, onClick) => {
-    setValue(e.target.value, optValue);
 
     setState(prevState => ({
       ...prevState,
-      dropDownItems: '',
+      dropDownItems: [],
+      displayValue: clickedValue,
     }));
 
     setIsMenuClosed(true);
@@ -71,14 +63,12 @@ function FormAutosuggest({
       // eslint-disable-next-line no-shadow
       const { children, onClick, ...rest } = child.props;
 
-      const modifiedOpt = React.cloneElement(child, {
+      return React.cloneElement(child, {
         ...rest,
         children,
         value: children,
-        onClick: (e) => handleItemClick(e, children, onClick),
+        onClick: (e) => handleItemClick(e, onClick),
       });
-
-      return modifiedOpt;
     });
 
     if (strToFind.length > 0) {
@@ -125,7 +115,7 @@ function FormAutosuggest({
     if (parentRef.current && !parentRef.current.contains(e.target) && state.dropDownItems.length > 0) {
       setState(prevState => ({
         ...prevState,
-        dropDownItems: '',
+        dropDownItems: [],
         errorMessage: !state.displayValue ? errorMessageText : '',
       }));
 
@@ -139,7 +129,7 @@ function FormAutosuggest({
 
       setState(prevState => ({
         ...prevState,
-        dropDownItems: '',
+        dropDownItems: [],
         errorMessage: !state.displayValue ? errorMessageText : '',
       }));
 
@@ -158,7 +148,7 @@ function FormAutosuggest({
   });
 
   useEffect(() => {
-    if (value !== state.displayValue) {
+    if (value || value === '') {
       setState(prevState => ({
         ...prevState,
         displayValue: value,
@@ -176,17 +166,10 @@ function FormAutosuggest({
     const normalized = itemValue.toLowerCase();
     const opt = optValue.find((o) => o.toLowerCase() === normalized);
 
-    if (opt) {
-      setState(prevState => ({
-        ...prevState,
-        displayValue: opt,
-      }));
-    } else {
-      setState(prevState => ({
-        ...prevState,
-        displayValue: itemValue,
-      }));
-    }
+    setState(prevState => ({
+      ...prevState,
+      displayValue: opt || itemValue,
+    }));
   };
 
   const handleClick = (e) => {
@@ -220,7 +203,7 @@ function FormAutosuggest({
     } else {
       setState(prevState => ({
         ...prevState,
-        dropDownItems: '',
+        dropDownItems: [],
         errorMessageText,
       }));
 

diff --git a/src/Form/form-autosuggest.mdx b/src/Form/form-autosuggest.mdx
@@ -19,23 +19,21 @@ Form auto-suggest enables users to manually select or type to find matching opti
 
 ```jsx live
 () => {
-    const [selected, setSelected] = useState({ title: '' });
+    const [selected, setSelected] = useState('');
 
     return (
         <Form.Autosuggest
             floatingLabel="Programming language"
             aria-label="form autosuggest"
             helpMessage="Select language"
             errorMessageText="Error, no selected value"
-            value={selected.title}
-            onSelected={
-                (value) => setSelected(prevState => ({ selected: { ...prevState.selected, title: value } }))
-            }
+            value={selected}
+            onSelected={(value) => setSelected(value)}
         >
             <Form.AutosuggestOption>JavaScript</Form.AutosuggestOption>
             <Form.AutosuggestOption>Python</Form.AutosuggestOption>
             <Form.AutosuggestOption>Rube</Form.AutosuggestOption>
-            <Form.AutosuggestOption onClick={(e) => alert(e.target.value)}>
+            <Form.AutosuggestOption onClick={(e) => alert(e.currentTarget.value)}>
                 Option with custom onClick
             </Form.AutosuggestOption>
         </Form.Autosuggest>
@@ -47,18 +45,16 @@ Form auto-suggest enables users to manually select or type to find matching opti
 
 ```jsx live
 () => {
-    const [selected, setSelected] = useState({ title: '' });
+    const [selected, setSelected] = useState('');
 
     return (
         <Form.Autosuggest
             placeholder="Type 'T'"
             aria-label="form autosuggest"
             errorMessageText="Error, no selected value"
             helpMessage="Select language"
-            value={selected.title}
-            onSelected={
-                (value) => setSelected(prevState => ({ selected: { ...prevState.selected, title: value } }))
-            }
+            value={selected}
+            onSelected={(value) => setSelected(value)}
         >
             <Form.AutosuggestOption>PHP</Form.AutosuggestOption>
             <Form.AutosuggestOption>Java</Form.AutosuggestOption>

diff --git a/src/Modal/AlertModal.jsx b/src/Modal/AlertModal.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import { requiredWhenNot } from '../utils/propTypes';
-import { Icon } from '..';
+import Icon from '../Icon';
 import ModalDialog from './ModalDialog';
 
 function AlertModal({