Change how show() and hide() work

[morrisjdev]

When doing this on an input element:

$('input').hide().show();

the styling of the input gets destroyed.

This is because the show method adds the display: block css property. But this changes the behavior of an inline-element for example and because of this cannot be used always.

Can you instead add and remove a hide-class (I am currently fixing it using .addClass('d-none')) or just remove the css-display-styling?

[olton]

Show full context of your code. Metro version? You use jQuery?

[morrisjdev]

Sorry for the lack of details.

The metro version of the npm-package is 4.3.1 and i'm not using jQuery.

The setup to reproduce is pretty easy.

HTML:

<div>
<input type='text' data-role='input' />
</div>

JS:

$('input').show().hide();

[morrisjdev]

And my current fix is to use this snippet to show and hide the objects:

public static hide(object: any) {
    object.addClass('d-none');
  }

  public static show(object: any) {
    object.removeClass('d-none');
  }

[olton]

$('input').closest(".input").show().hide();

[olton]

Input component is comlex element. After add role input to element, metro add wrapper and additional elements. To hide component, you must hide wrapper.

[olton]

If method show can get display value from element, then uses it. You can add specific display value before using show/hide to use this value.

[morrisjdev]

Ok thank you.
Yes i figured it out, but I think it would be an improvement to reduce the error probability if you just completely remove the display property by default.