Components: Input-container does not have an hidden property, and does not honor inner input hidden property

[michaeljota]

Bug, feature request, or proposal:

Right now there is no way to hide an input property, cause the input-container does not have (or does not honor) a hidden property. Also, it's a hidden property it's set in the input child, the input will hide, but the other "decorators", placeholders, prefix, suffix, will not.

What is the expected behavior?

A way to actually hide a input.

What is the current behavior?

The input it's not hided.

What are the steps to reproduce?

  <md-input-container
    fxFlex
    class="flex-item"
    *ngFor="let input of inputFieldList"
    hidden="true"
  >
    <input md-input
      [placeholder]="input.placeholder"
      [formControlName]="input.name"
    >
    </textarea>
  </md-input-container>

I tried also [hidden]="'true'" and [hidden]="item.hidden". Neither of them work.

If is set in the input, just the input gets hidden.

  <md-input-container
    fxFlex
    class="flex-item"
    *ngFor="let input of inputFieldList"
  >
    <input md-input
      [placeholder]="input.placeholder"
      [formControlName]="input.name"
      hidden="true"
    >
    </textarea>
  </md-input-container>

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, browsers are affected?

Angular 2.4.2
Material 2.0.0-beta.1

Is there anything else we should know?

I try to search, and did not find anything. Sorry if this is duplicated.

[crisbeto]

That's because the input container has a display: inline-block, which takes precedence over the browser agent stylesheet (which is the one that sets [hidden] { display: none; }). You can work around it by adding this somewhere in your stylesheet:

[hidden] {
  display: none;
}

[michaeljota]

Thanks you. I will use this. Just to know, this solution is just a temporally workaround or is this the intended behavior?

[crisbeto]

In general, we try to avoid defining global styles like this one, so I doubt that we'd add it to Material itself. I recommend either adding this to your CSS or using a class for hiding stuff.

[michaeljota]

Thanks. 👍

[michaeljota]

But, the component should read the hidden property, and do binding with it's own css display property, shouldn't it?

[crisbeto]

Not necessarily. The hidden attribute is built-in browser attribute, it's not something that's specific to Material or Angular. The issue with it is that it's specificity is really low, which makes it very easy to override.

[michaeljota]

But, I mean, I think the component should handle the display for itself, shouldn't it? I know the hidden property it's something built-in browsers, but still, a expected behavior if it is set to false, it's for the component to hide, and the component should do it. I understand you mean, but you won't, and it should not, override any built-in property, it just have to set it temporally as is, to be handle by the browser.

[michaeljota]

@crisbeto After some read, I was waiting for the stable version, I found this: https://codingwithgerwin.blogspot.com/2016/04/polymer-and-hidden-attribute.html. That may help you about the hidden property. I did what you said, but how is explain in the article, the CSS specification of yours is prefer. But you could add the hidden property as appears in the article.

That maybe a solution. You could use Promact/md2#34 for example.

[michaeljota]

@crisbeto Have you though about this? Adding

    mat-form-field[hidden] {
      display: none;
    }

still feels tricky and a workaround. I think this should be build in. This is not something specific to a browser, but a CSS standard. https://caniuse.com/#search=hidden.

It's really weird that when you apply hidden to any attribute this still show.

[uds214125]

Thought its 2019 and still it is helpful. @crisbeto

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}