Skip to main content
强 刘 posted in #LWC

 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:

  1. 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.
  2. Then select a valid value for projectDetails (clearing the error) → the red border disappears (correct behavior).
  3. 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

0/9000