16006182009

Committed 01 Jul 2025 05:32PM UTC coverage: 62.703% (-8.6%) from 71.278%

Build # 16006182009

Build Type

Pull #756

github

Committed by

web-flow

Commit Message

Merge pull request #755 from CBIIT/revert-omb-date

revert: OMB expiration update

Pull Request Pull Request #756: Sync 3.4.0 with 3.3.0

Run Details

3560 of 6102 branches covered (58.34%)

Branch coverage included in aggregate %.

4920 of 7422 relevant lines covered (66.29%)

227.7 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

3.88

/src/components/Questionnaire/CustomAutocomplete.tsx

import {
  AutocompleteChangeReason,
  AutocompleteProps,
  AutocompleteValue,
  FormControl,
  Grid,
  TextField,
  styled,
} from "@mui/material";
import { ReactNode, SyntheticEvent, useEffect, useId, useRef, useState } from "react";
import Tooltip from "../Tooltip";
import { updateInputValidity } from "../../utils";
import StyledLabel from "../StyledFormComponents/StyledLabel";
import StyledHelperText from "../StyledFormComponents/StyledHelperText";
import StyledAsterisk from "../StyledFormComponents/StyledAsterisk";
import StyledAutocomplete from "../StyledFormComponents/StyledAutocomplete";

const StyledFormControl = styled(FormControl)({
  height: "100%",
  justifyContent: "end",
  "& .MuiFormHelperText-root.Mui-error": {
    color: "#D54309 !important",
  },
});

const StyledTag = styled("div")({
  paddingLeft: "12px",
  position: "absolute",
});

const ProxySelect = styled("select")({
  display: "none",
});

export type CustomProps = {
  /**
   * The HTML form name attribute
   *
   * @note Used to parse the form data into a JSON object
   */
  name: string;
  /**
   * The label text for the input to display above the input field
   */
  label: string;
  /**
   * The value of the input field
   */
  value: string[];
  /**
   * The options to display in the input selection dropdown
   */
  options: string[];
  /**
   * The text to display in the placeholder when multiple values are selected
   */
  tagText: (value: string[]) => string;
  /**
   * The width of the input in the form grid
   */
  gridWidth?: 2 | 4 | 6 | 8 | 10 | 12;
  helpText?: string;
  tooltipText?: string | ReactNode;
  required?: boolean;
  validate?: (input: string | string[]) => boolean;
} & Omit<AutocompleteProps<string, boolean, true, true, "div">, "renderInput">;

/**
 * Provides a custom autocomplete input field with a label and helper text.  The primary focus is:
 *
 * - Disable the clear button
 * - Constrain the rendering of tags to a single line
 * - Sort the selected options above the unselected options after blur
 *
 * @note This component supports only string values currently
 * @param {CustomProps} props
 * @returns {JSX.Element}
 */
const CustomAutocomplete = ({
  tagText,
  name,
  label,
  gridWidth,
  helpText,
  tooltipText,
  required,
  value,
  onChange,
  options,
  validate,
  placeholder,
  readOnly,
  ...rest
}: CustomProps): JSX.Element => {
  const id = rest.id || useId();

  const [val, setVal] = useState<string[]>(value);
  const [error, setError] = useState<boolean>(false);
  const [hasFocus, setHasFocus] = useState<boolean>(false);
  const [separatedOptions, setSeparatedOptions] = useState<string[]>(options);

  const helperText = helpText || (required ? "This field is required" : " ");
  const inputRef = useRef<HTMLInputElement>(null);

  const processValue = (newValue: string[]) => {
    if (typeof validate === "function") {
      const customIsValid = validate(newValue);
      updateInputValidity(inputRef, !customIsValid ? helpText : "");
    } else if (required) {
      updateInputValidity(inputRef, !newValue ? helperText : "");
    }

    setVal(newValue);
  };

  const onChangeWrapper = (
    event: SyntheticEvent,
    newValue: AutocompleteValue<string[], false, false, false>,
    reason: AutocompleteChangeReason
  ): void => {
    if (typeof onChange === "function") {
      onChange(event, newValue, reason);
    }

    processValue(newValue);
    setError(false);
  };

  const handleInputBlur = () => {
    setHasFocus(false);
    sortOptions(true);
  };

  const sortOptions = (force = false) => {
    if (hasFocus && !force) {
      return;
    }

    const selectedOptions = val
      .filter((v) => options.includes(v))
      .sort((a, b) => a.localeCompare(b));
    const unselectedOptions = options.filter((o) => !selectedOptions.includes(o));

    setSeparatedOptions([...selectedOptions, ...unselectedOptions]);
  };

  useEffect(() => {
    const invalid = () => setError(true);

    inputRef.current?.addEventListener("invalid", invalid);
    return () => {
      inputRef.current?.removeEventListener("invalid", invalid);
    };
  }, [inputRef]);

  useEffect(() => {
    processValue(value);
  }, [value]);

  useEffect(() => {
    sortOptions();
  }, [options, val]);

  return (
    <Grid md={gridWidth || 6} xs={12} item>
      <StyledFormControl fullWidth error={error}>
        <StyledLabel htmlFor={id} id={`${id}-label`}>
          {label}
          {required ? <StyledAsterisk /> : ""}
          {tooltipText && <Tooltip placement="right" title={tooltipText} />}
        </StyledLabel>
        <StyledAutocomplete
          value={val}
          onChange={onChangeWrapper}
          options={separatedOptions}
          readOnly={readOnly}
          getOptionLabel={(option: string) => option}
          renderTags={(value: string[]) => {
            if (value?.length === 0 || hasFocus) {
              return null;
            }

            if (value.length === 1) {
              return <StyledTag>{value[0]}</StyledTag>;
            }

            return <StyledTag>{tagText(value)}</StyledTag>;
          }}
          renderInput={(params) => (
            <TextField
              {...params}
              inputRef={inputRef}
              placeholder={val?.length > 0 ? undefined : placeholder}
              id={id}
              onFocus={() => !readOnly && setHasFocus(true)}
              onBlur={handleInputBlur}
              onKeyDown={(event) => {
                // Prevent backspace from clearing input tags
                if (event.key === "Backspace") {
                  event.stopPropagation();
                }
              }}
            />
          )}
          {...rest}
        />
        <StyledHelperText>{!readOnly && error ? helperText : " "}</StyledHelperText>
      </StyledFormControl>
      <ProxySelect
        name={name}
        value={val}
        aria-labelledby={`${id}-label`}
        onChange={() => {}}
        multiple
        hidden
      >
        {val.map((v) => (
          <option key={v} value={v} aria-label={v} />
        ))}
      </ProxySelect>
    </Grid>
  );
};

export default CustomAutocomplete;

1	import {
2	AutocompleteChangeReason,
3	AutocompleteProps,
4	AutocompleteValue,
5	FormControl,
6	Grid,
7	TextField,
8	styled,
9	} from "@mui/material";
10	import { ReactNode, SyntheticEvent, useEffect, useId, useRef, useState } from "react";
11	import Tooltip from "../Tooltip";
12	import { updateInputValidity } from "../../utils";
13	import StyledLabel from "../StyledFormComponents/StyledLabel";
14	import StyledHelperText from "../StyledFormComponents/StyledHelperText";
15	import StyledAsterisk from "../StyledFormComponents/StyledAsterisk";
16	import StyledAutocomplete from "../StyledFormComponents/StyledAutocomplete";
17
18	const StyledFormControl = styled(FormControl)({	2✔
19	height: "100%",
20	justifyContent: "end",
21	"& .MuiFormHelperText-root.Mui-error": {
22	color: "#D54309 !important",
23	},
24	});
25
26	const StyledTag = styled("div")({	2✔
27	paddingLeft: "12px",
28	position: "absolute",
29	});
30
31	const ProxySelect = styled("select")({	2✔
32	display: "none",
33	});
34
35	export type CustomProps = {
36	/**
37	* The HTML form name attribute
38	*
39	* @note Used to parse the form data into a JSON object
40	*/
41	name: string;
42	/**
43	* The label text for the input to display above the input field
44	*/
45	label: string;
46	/**
47	* The value of the input field
48	*/
49	value: string[];
50	/**
51	* The options to display in the input selection dropdown
52	*/
53	options: string[];
54	/**
55	* The text to display in the placeholder when multiple values are selected
56	*/
57	tagText: (value: string[]) => string;
58	/**
59	* The width of the input in the form grid
60	*/
61	gridWidth?: 2 \| 4 \| 6 \| 8 \| 10 \| 12;
62	helpText?: string;
63	tooltipText?: string \| ReactNode;
64	required?: boolean;
65	validate?: (input: string \| string[]) => boolean;
66	} & Omit<AutocompleteProps<string, boolean, true, true, "div">, "renderInput">;
67
68	/**
69	* Provides a custom autocomplete input field with a label and helper text. The primary focus is:
70	*
71	* - Disable the clear button
72	* - Constrain the rendering of tags to a single line
73	* - Sort the selected options above the unselected options after blur
74	*
75	* @note This component supports only string values currently
76	* @param {CustomProps} props
77	* @returns {JSX.Element}
78	*/
79	const CustomAutocomplete = ({	2✔
80	tagText,
81	name,
82	label,
83	gridWidth,
84	helpText,
85	tooltipText,
86	required,
87	value,
88	onChange,
89	options,
90	validate,
91	placeholder,
92	readOnly,
93	...rest
94	}: CustomProps): JSX.Element => {
95	const id = rest.id \|\| useId();	×
96
97	const [val, setVal] = useState<string[]>(value);	×
98	const [error, setError] = useState<boolean>(false);	×
99	const [hasFocus, setHasFocus] = useState<boolean>(false);	×
100	const [separatedOptions, setSeparatedOptions] = useState<string[]>(options);	×
101
102	const helperText = helpText \|\| (required ? "This field is required" : " ");	×
103	const inputRef = useRef<HTMLInputElement>(null);	×
104
105	const processValue = (newValue: string[]) => {	×
106	if (typeof validate === "function") {	×
107	const customIsValid = validate(newValue);	×
108	updateInputValidity(inputRef, !customIsValid ? helpText : "");	×
109	} else if (required) {	×
110	updateInputValidity(inputRef, !newValue ? helperText : "");	×
111	}
112
113	setVal(newValue);	×
114	};
115
116	const onChangeWrapper = (	×
117	event: SyntheticEvent,
118	newValue: AutocompleteValue<string[], false, false, false>,
119	reason: AutocompleteChangeReason
120	): void => {
121	if (typeof onChange === "function") {	×
122	onChange(event, newValue, reason);	×
123	}
124
125	processValue(newValue);	×
126	setError(false);	×
127	};
128
129	const handleInputBlur = () => {	×
130	setHasFocus(false);	×
131	sortOptions(true);	×
132	};
133
134	const sortOptions = (force = false) => {	×
135	if (hasFocus && !force) {	×
136	return;	×
137	}
138
139	const selectedOptions = val	×
140	.filter((v) => options.includes(v))	×
141	.sort((a, b) => a.localeCompare(b));	×
142	const unselectedOptions = options.filter((o) => !selectedOptions.includes(o));	×
143
144	setSeparatedOptions([...selectedOptions, ...unselectedOptions]);	×
145	};
146
147	useEffect(() => {	×
148	const invalid = () => setError(true);	×
149
150	inputRef.current?.addEventListener("invalid", invalid);	×
151	return () => {	×
152	inputRef.current?.removeEventListener("invalid", invalid);	×
153	};
154	}, [inputRef]);
155
156	useEffect(() => {	×
157	processValue(value);	×
158	}, [value]);
159
160	useEffect(() => {	×
161	sortOptions();	×
162	}, [options, val]);
163
164	return (	×
165	<Grid md={gridWidth \|\| 6} xs={12} item>	×
166	<StyledFormControl fullWidth error={error}>
167	<StyledLabel htmlFor={id} id={`${id}-label`}>
168	{label}
169	{required ? <StyledAsterisk /> : ""}	×
170	{tooltipText && <Tooltip placement="right" title={tooltipText} />}	×
171	</StyledLabel>
172	<StyledAutocomplete
173	value={val}
174	onChange={onChangeWrapper}
175	options={separatedOptions}
176	readOnly={readOnly}
177	getOptionLabel={(option: string) => option}	×
178	renderTags={(value: string[]) => {
179	if (value?.length === 0 \|\| hasFocus) {	×
180	return null;	×
181	}
182
183	if (value.length === 1) {	×
184	return <StyledTag>{value[0]}</StyledTag>;	×
185	}
186
187	return <StyledTag>{tagText(value)}</StyledTag>;	×
188	}}
189	renderInput={(params) => (
190	<TextField	×
191	{...params}
192	inputRef={inputRef}
193	placeholder={val?.length > 0 ? undefined : placeholder}	×
194	id={id}
195	onFocus={() => !readOnly && setHasFocus(true)}	×
196	onBlur={handleInputBlur}
197	onKeyDown={(event) => {
198	// Prevent backspace from clearing input tags
199	if (event.key === "Backspace") {	×
200	event.stopPropagation();	×
201	}
202	}}
203	/>
204	)}
205	{...rest}
206	/>
207	<StyledHelperText>{!readOnly && error ? helperText : " "}</StyledHelperText>	×
208	</StyledFormControl>
209	<ProxySelect
210	name={name}
211	value={val}
212	aria-labelledby={`${id}-label`}
213	onChange={() => {}}
214	multiple
215	hidden
216	>
217	{val.map((v) => (
218	<option key={v} value={v} aria-label={v} />	×
219	))}
220	</ProxySelect>
221	</Grid>
222	);
223	};
224
225	export default CustomAutocomplete;

CBIIT / crdc-datahub-ui / 16006182009

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous