0

I'm trying to embed an lightning-icon in an lightning-input field to hide/display the password value.

<div class="slds-form-element">
  <label class="slds-form-element__label" for="text-input-id-3">Password</label>
  <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_right">
     <lightning-input required type="password" value={password} onchange={handlePasswordChange} maxlength="64" minlength="8" style="font-weight:bold;"></lightning-input>
     <lightning-icon onclick={togglePw} size="x-small" class="slds-icon slds-input__icon slds-input__icon_right slds-icon-text-default" icon-name="utility:hide"></lightning-icon>
  </div>
</div>

(Example from: https://www.forcetrails.com/2020/05/how-to-create-lightning-input-with-icon-lwc.html)

In this combination, the onclick event dont fire my togglePw function. (no erros in the js-console)

When I deploy the lightning-icon separately, the event works.

<div class="slds-form-element">
  <label class="slds-form-element__label" for="text-input-id-3">Password</label>
  <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_right">
     <lightning-input required type="password" value={password} onchange={handlePasswordChange} maxlength="64" minlength="8" style="font-weight:bold;"></lightning-input>
  </div>
</div>

<lightning-icon onclick={togglePw} size="x-small" class="slds-icon slds-input__icon slds-input__icon_right slds-icon-text-default" icon-name="utility:hide"></lightning-icon>

Why does the event work if it is not embedded

togglePw function:

togglePw() {
    console.log('togglePw');
}

2 Answers 2

1

Issue is Salesforce standard style has

.slds-input-has-icon .slds-input__icon:not(button) {
    pointer-events: none;
}

Adding pointer-events back, it will work..

<lightning-icon onclick={togglePw} size="x-small"  class="iconenablepointerevetns slds-icon slds-input__icon slds-input__icon_right slds-icon-text-default" icon-name="utility:hide"></lightning-icon>

with css

.slds-input__icon.iconpointerevetns{
    pointer-events:all
}
2
  • perfect! this solved my issue!!
    – Edi G.
    Nov 23, 2021 at 6:34
  • This approach may introduce accessibility issues. A lightning-button-icon would be more appropriate here.
    – sfdcfox
    Nov 23, 2021 at 16:23
0

For accessibility purposes, you should use lightning-button-icon if you need a clickable icon. You should not generally mess with the standard SLDS styles unless you've researched the ramifications of doing so.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.