fix(input-message): auto-hide message when there is no content #6037
Conversation
github-actions
bot
added
the
bug
| @@ -35,6 +35,9 @@ export class InputMessage { | |||
| /** Specifies the status of the input field, which determines message and icons. */ | |||
| @Prop({ reflect: true, mutable: true }) status: Status = "idle"; | |||
|
|
|||
| /** Specifies if the message should be visible to the user */ | |||
| @Prop({ reflect: true, mutable: true }) hidden = false; | |||
There was a problem hiding this comment.
Hey @alisonailea, instead of adding a hidden property, can you create a container <div> inside the component that surrounds all the internal elements and hide it based on the textContent logic? The reasoning is that there's already a global hidden attribute on HTMLElement's and we don't want to override any hidden attribute or display:none that a user sets on the host element.
For example, if a user added hidden to this component it would be removed if it had textContent.
It's been a best practice that we don't change the display of an element during its lifecycle. I think I can add this to the conventions if its not already there.
Proposal:
<Host calcite-hydrated-hidden={hidden}>
<div class={{["has-content"]: hasContent}}>
{this.renderIcon(this.requestedIcon)}
<slot />
</div>
</Host>| this.scale = getElementProp(this.el, "scale", this.scale); | ||
| this.requestedIcon = setRequestedIcon(StatusIconDefaults, this.icon, this.status); | ||
| const content = this.el.textContent; | ||
| if (content === "" && !this.icon) { |
There was a problem hiding this comment.
I think we will need to setup a mutationObserver to watch for textConttent changes. Otherwise, if a user adds or removes textContent after the component connectedCallback has been called then this if statement won't change.
We need conventions on this as well. eek :(
I'll make a note for these conventions to be added.
|
this is not the right fix here. As mentioned by @driskull this shouldn't control the hidden attribute on host. but no other solution will work without a refactor of calcite-label as well. A workaround solution is simply for users to add "hidden" attribute to empty input-message. |
Related Issue: #5130
Summary
Auto hides the input message when there is no content.
Before:
After:
