LWC lightning-select class Bug: slds-has-error in Log But No Red Border
I'm developing a Lightning Web Component (LWC) with an inline lightning-select picklist field (projectDetails) in a data table, where I validate required fields before submission.
Core Issue
When users:
- First submit the form with an empty projectDetails value (for selected rows) → the validation logic correctly flags the error, sets item.projectDetailsClass = 'slds-has-error', and the red error border appears as expected.
- Then select a valid value for projectDetails (clearing the error) → the red border disappears (correct behavior).
- Reselect/clear the projectDetails value to empty again and click submit → the validation logic still detects the empty value (confirmed via console.log showing hasDetailsError = true and projectDetailsClass: "slds-has-error"), but the red error border does NOT reappear on the lightning-select field.
Final Fix
The issue was resolved by binding both onblur and onchange to the same handleBlur handler
(which syncs the field value to the component’s data state), ensuring all user interactions (value change + focus loss) update the state in real time—even when reselecting empty values.
<lightning-select
label="企画内容"
name="projectDetails"
value={item.projectDetails}
options={projectDetailsPickListValues}
data-item-id={item.id}
variant="label-hidden"
onblur={handleBlur}
onchange={handleBlur}
class={item.projectDetailsClass}
></lightning-select>
#LWC