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;
8

Hello, just checking in—any updates on this?

9

Hey @jaymit_b - thanks for following up. I still can’t guarantee a turnaround time on this, but can confirm there’s been movement toward a fix. We’ll keep an eye on this and let you know once it’s been shipped!