Autosuggest - Bug!

[hanoj-budime]

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Include steps to reproduce the behaviour.

() => {
  const [value, setValue] = useState("");
  const [errorMessage, setErrorMessage] = useState();
  const onChange = ({ value, error }) => {
    setValue(value);
    setErrorMessage(error == undefined ? "" : "Error onChange: invalid email");
  };
  const onBlur = ({ value, error }) => {
    setValue(value);
    setErrorMessage(error == undefined ? "" : "Error onBlur: invalid email");
  };
  const callbackFunc = (newValue) => {
    const result = new Promise((resolve) =>
      setTimeout(() => {
        resolve(
          newValue
            ? countries.filter((option) =>
                option.toUpperCase().includes(newValue.toUpperCase())
              )
            : countries
        );
      }, 1500)
    );
    return result;
  };

  const validEmail = new RegExp("^arn" );
  return (
    <DxcInset space="2rem">
      <DxcTextInput
        value="*"
        label="Enter your email"
        onChange={onChange}
        onBlur={onBlur}
        error={errorMessage}
        pattern={validEmail}
        suggestions={callbackFunc }
        clearable
      />
    </DxcInset>
  );
}

Example:

1. Create a new React App using create-react-app.
2. Install the @dxc-technology\halstack-react dependencies and run the app. 6.2.2
3. Click on '...'.
4. Scroll down to '...'.
5. See the error.

Expected behaviour
When Text Input has invaild pattern value inside input box on click - we end-up white screen & error...

Screenshots
If applicable, add screenshots to help explain your problem.

[hanoj-budime]

@kukoc @raquelarrojo

Please any one help me on this...

[aidamag]

Hi @HanojHanu,

You are not able to clear the input because of value="*". As your component is controlled, you need to use the useState to
update the value as value={value}.

[hanoj-budime]

We got error in Realms Application.

ended-up with white screen

() => {
  const denyAclPolicy = {
    aclStatement: [
      {
        Sid: "Assure Platform Default Deny",
        Action: "*",
        Effect: "Deny",
        Resource: ["*"],
      },
    ],
  };

  const [value, setValue] = useState("*");
  const [statement, setStatement] = useState(denyAclPolicy.aclStatement);
  const [errorMessage, setErrorMessage] = useState();
  const onChange = ({ value, error }) => {
    setValue(value);
    setErrorMessage(error == undefined ? "" : "Error onChange: invalid email");
  };
  const onBlur = ({ value, error }) => {
    setValue(value);
    setErrorMessage(error == undefined ? "" : "Error onBlur: invalid email");
  };
  
  
  const suggestions_resource = (newValue) => {
    const result = new Promise((resolve) =>
      setTimeout(() => {
        resolve(
          newValue
            ? statement.Resource.filter((option) =>
                option.toUpperCase().includes(newValue.toUpperCase())
              )
            : statement.Resource 
        );
      }, 1500)
    );
    return result;
  };
  

  const resource_pattern = new RegExp("^arn" );
  return (
    <>
       {statement &&
          statement.Resource &&
          statement.Resource.map((item, i) => (
            <DxcInset space="2rem">
              <DxcTextInput
                value={item}
                label="Enter your email"
                onChange={onChange}
                onBlur={onBlur}
                error={errorMessage}
                pattern={resource_pattern}
                suggestions={suggestions_resource}
                clearable
              />
            </DxcInset>
         ))}
     </>
  );
}

[hanoj-budime]

// Auto suggestion - resource input

/**
 * There is small issue with the suggestions 
 * Suggestions not supporting onclick text input value which has invalid pattern inside Text-Input
 * After add comment to prop "suggestions" it is working...
 */

    <DxcTextInput
        value={item}
        label="Enter your email"
        onChange={onChange}
        onBlur={onBlur}
        error={errorMessage}
        pattern={resource_pattern}
        // suggestions={suggestions_resource}
        clearable
     />

But, we want to use this "suggestions"

[hanoj-budime]

[hanoj-budime]

[hanoj-budime]

Uncaught SyntaxError: Invalid regular expression: /*/: Nothing to repeat (at Suggestion.js:26:1)
    at new RegExp (<anonymous>)
    at Suggestion (Suggestion.js:26:1)
    at renderWithHooks (react-dom.development.js:14985:1)
    at updateFunctionComponent (react-dom.development.js:17356:1)
    at updateSimpleMemoComponent (react-dom.development.js:17215:1)
    at updateMemoComponent (react-dom.development.js:17092:1)
    at beginWork (react-dom.development.js:19135:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at beginWork$1 (react-dom.development.js:23964:1)
    at performUnitOfWork (react-dom.development.js:22776:1)
    at workLoopSync (react-dom.development.js:22707:1)
    at renderRootSync (react-dom.development.js:22670:1)
    at performSyncWorkOnRoot (react-dom.development.js:22293:1)
    at react-dom.development.js:11327:1
    at unstable_runWithPriority (scheduler.development.js:468:1)
    at runWithPriority$1 (react-dom.development.js:11276:1)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322:1)
    at flushSyncCallbackQueue (react-dom.development.js:11309:1)
    at discreteUpdates$1 (react-dom.development.js:22420:1)
    at discreteUpdates (react-dom.development.js:3756:1)
    at dispatchDiscreteEvent (react-dom.development.js:5889:1)

[aidamag]

Hi @HanojHanu,

We have been checking this issue and the problem is related with the character * inside the suggestions as it is reading it as a regular expression.

I will create an issue about this.

[aidamag]

I will close this issue and continue on #1416.