adobe / adobe/spectrum-web-components

[Feat]: Option to hide default password reveal icon on edge browser for sp-textfield

Open
#4,589 0 comments 0 reactions 0 assignees View on GitHub
Component:Textfield Feature needs-jira-ticket
Dominant language
TypeScript
Stars
1.5k
Forks
262
Avg merge
3d 10h
Merged PRs (30d)
68

Description

### Code of conduct

- [X] I agree to follow this project's code of conduct.

### Impacted component(s)

sp-textfield

### Description of the requested feature

I’m looking for a feature that hides the password reveal icon set on Edge browser by default. Can we keep a property or any other alternate options in textField to remove the default edge password reveal icon. In my case, I was trying to add a password reveal icon inside textfield myself but in edge browser because of default reveal icon, there were two icons visible. I can't do any workaround from my side for this since the changes need to be done inside shadowDOM of textField.

### Mockups or screenshots

Screenshot 2024-07-05 at 2 50 26 PM

You can see two password reveal icons shown in textfield (pls ignore the CSS of reveal icon shown)

### Implementation notes or ideas

I found [this](https://learn.microsoft.com/en-us/microsoft-edge/web-platform/password-reveal#remove-the-password-reveal-control) article from edge to disable the icon. Adding the style property (mentioned in the article) from the developer tools to the shadow root of spectrum text field is fixing it.

Contributor guide

Open the contributing guide

Research direction

Start by reading the sp-textfield component and the linked Microsoft Edge guidance for removing the password reveal control, then inspect how the component renders its shadow root. Done means a supported option prevents Edge's default reveal icon from appearing while allowing a custom reveal icon without duplication.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.