TextField web component error styling issue

Polaris
1

I’m using the s-text-field web component in React app, but the error styling isn’t working consistently. Sometimes it applies the related CSS classes, and sometimes it doesn’t. The issue mostly occurs when showing errors dynamically — it doesn’t work the first time, but works correctly afterward.

image (5)
image (5)624×124 6.26 KB

image (6)
image (6)624×124 7.15 KB

2

Thanks for flagging this - we’re investigating this issue now.

3

Could you let me know which version of React you’re using? Thanks!

5

I’m using the following versions of React:

"react": "^18.2.0",
"react-dom": "^18.2.0"
6

I got a reproduction with the following code:

// src/App.js
import React, { useState } from "react";

function App() {
  const [inputValue, setInputValue] = useState("");
  const [showError, setShowError] = useState(false);

  const handleValidate = (value) => {
    if (!value.trim()) {
      setShowError(true);
    } else {
      setShowError(false);
    }
  };

  const handleInputChange = (e) => {
    const value = e.target.value;
    setInputValue(value);
    handleValidate(value);
  };

  return (
    <div style={{ padding: "2rem" }}>
      <h1>Polaris Web Component - Dynamic Error</h1>

      <s-text-field
        label="Name"
        placeholder="Enter your name"
        value={inputValue}
        error={showError ? "Invalid!" : ""}
        onChange={handleInputChange}
      ></s-text-field>

      <br />
      <button onClick={() => handleValidate(inputValue)}>Validate</button>
    </div>
  );
}

export default App;