Inconsistent Error Styling with s-text-field and s-checkbox Web Components in React

Polaris
1

I’m using the form controls web components like s-text-field and s-checkbox in my React app. However, I’m facing an issue where the error styling doesn’t apply consistently.

When displaying validation errors dynamically (e.g., after user interaction), the error-related CSS classes are sometimes not added on the first attempt. Strangely, it starts working correctly after the initial interaction or re-render.

Is this a known issue with dynamic updates in these components? Are there any recommended practices to ensure consistent error styling when using these web components in a React environment?

Any guidance would be appreciated!

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

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

2

Hey @jaymit_b - thanks for flagging this. I’m thinking this may be a common attribute → property mismatch that can happen when React renders custom elements, but it would be super helpful to see exactly how the components are being used in your code.

If you’re comfortable with it, could you share/post a small snippet that shows how you render s-text-field (or s-checkbox) and how you update the error state?

A minimal example with just the JSX plus the validation logic would be great! With that, I can confirm with some folks internally whether the attribute/property sync is the culprit or if there’s an issue on our end. Hope to hear from you soon!

3 
// 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;
4

Thanks @jaymit_b - I’m digging into this a bit further now for you, I’ll loop back with you when I have more to share :slight_smile:

6

Hey @jaymit_b - just following up with you here as I heard back from our team quickly. It looks like there have been other reports of this and we’re tracking them here:

I’ll close out this thread as solved now, but please feel free to follow along in that other thread for updates. Hope this helps a little bit.

1 Like