Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Chip input in form field doesn't show placeholder #16380

Closed
jfcere opened this issue Jun 25, 2019 · 3 comments · Fixed by #30664
Closed

Chip input in form field doesn't show placeholder #16380

jfcere opened this issue Jun 25, 2019 · 3 comments · Fixed by #30664
Assignees
@crisbeto
Labels
area: material/chips P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@jfcere
Copy link

jfcere commented Jun 25, 2019 •
edited
Loading

Feature Description

Add an optional secondary placeholder for chips input component.

Use Case

In Angular Material for Angular.js chips input could have a secondary placeholder for when one chip was already present in the input. IMHO this increases the user experience by letting him know that chips can be added.

angular-material-chip-input-secondary-placeholder

Reference: https://material.angularjs.org/1.1.0/demo/chips
@jfcere jfcere added the feature This issue represents a new feature or feature request rather than a bug or bug fix label Jun 25, 2019
@jfcere
Copy link
Author

jfcere commented Jun 25, 2019 •
edited
Loading

Airblader
Can't you just bind a placeholder depending on the number of chips that are already present?

@Airblader yes of course but the placeholder would still appear on top of the input, not after the last chip where the user should click to type the new chip text and would not serve the same purpose.

Imagine having a list of email addresses, the placeholder on top of the list should not say "Enter new email" but preferably only "Emails". The purpose of the secondary placeholder would be to invite the user to enter new values.

image

@Airblader
Copy link
Contributor

Yeah, sorry, I misunderstood.

@jfcere
Copy link
Author

jfcere commented Jun 25, 2019

No worry, thanks for your suggestion... this only proves my request was not clear enough :)

@mmalerba mmalerba added the needs triage This issue needs to be triaged by the team label May 20, 2020
@crisbeto crisbeto added area: material/chips P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent and removed feature This issue represents a new feature or feature request rather than a bug or bug fix needs triage This issue needs to be triaged by the team labels May 29, 2020
@crisbeto crisbeto changed the title Input chip: secondary placeholder Chip input in form field doesn't show placeholder May 29, 2020
@crisbeto crisbeto mentioned this issue Sep 22, 2023
Closed
1 task
@crisbeto crisbeto self-assigned this Mar 20, 2025
crisbeto added a commit to crisbeto/material2 that referenced this issue Mar 20, 2025
@crisbeto
fix(material/chips): chip input not showing placeholder
19c64ed 
The chip input is inheriting some styles from `MatInput` which were causing it not to show its placeholder unless it's focused.

These changes override the inherited styles to show it correctly.

Fixes angular#16380.
@crisbeto crisbeto mentioned this issue Mar 20, 2025
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@crisbeto crisbeto

Labels
area: material/chips P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(material/chips): chip input not showing placeholder crisbeto/material2
4 participants
@Airblader @crisbeto @jfcere @mmalerba