message: fix(origin-ui-core): multiselect validation bug
diff: -import React, { useState } from 'react';
  +import React, { useState, useEffect } from 'react';
  import { TextField, Chip, makeStyles, createStyles, useTheme } from '@material-ui/core';
  import { Autocomplete } from '@material-ui/lab';
  @@ -52,6 +52,19 @@ export function MultiSelectAutocomplete(props: IOwnProps) {
  const classes = useStyles(useTheme());
  const [touchFlag, setTouchFlag] = useState<boolean>(null);
  const [textValue, setTextValue] = useState<string>('');
  + const [requiredState, setRequiredState] = useState<boolean>(null);
  +
  + useEffect(() => {
  + setRequiredState(required);
  + }, [required]);
  +
  + useEffect(() => {
  + if (selectedValues.length > 0) {
  + setRequiredState(false);
  + } else {
  + setRequiredState(true);
  + }
  + }, [selectedValues]);
  return (
  <div className={className}>
  @@ -81,16 +94,16 @@ export function MultiSelectAutocomplete(props: IOwnProps) {
  renderInput={(params) => (
  <TextField
  {...params}
  - required={required}
  + required={requiredState}
  label={label}
  onChange={(event) => setTextValue(event.target.value)}
  helperText={
  - touchFlag && required && props.selectedValues.length === 0
  + touchFlag && requiredState && selectedValues.length === 0
  ? label + ' is a required field'
  : ''
  }
  inputProps={{ ...params.inputProps }}
  - error={touchFlag && required && props.selectedValues.length === 0}
  + error={touchFlag && requiredState && selectedValues.length === 0}
  placeholder={singleChoice && touchFlag ? '' : placeholder}
  fullWidth
  variant="filled"
  