search

deven-org / boiler

A fully customisable and tokenised design system boilerplate built by Accenture Song
https://boilerds.com/
MIT License
18 stars 7 forks source link

Input Field Number - placeholder is shown instead of value (0) when readonly is true #725

Open thrbnhrtmnn opened 10 months ago

thrbnhrtmnn commented 10 months ago

Step-by-Step Guide to reproduce

  1. Open Input Field Number in Storybook
  2. Set a value = 0
  3. Set readonly to true
  4. See that value is not shown

If a different value is set than 0, the bug is not occuring.

Bug Description / False Behaviour

When the Input Field Number has a value and readonly=true, it does not display the value.

Correct Behaviour

When the Input Field Number has a value and readonly=true, it displays the value.

Testing

Check existing unit tests of the component(s) and adjust the tests to prevent this bug from occurring again in the future, if you see a way.

Background

usmanreal1 commented 10 months ago

Hi @thrbnhrtmnn ,

Since it's related to my last PR I had a look.

The reason that value is being reset here to placeholder or if we remove the condition I introduced in my last PR then to 0 is when readonlyor disableor any other parms is set, it rerenders with a new instance with default params hence overwriting the existing set values.

For example if we set the valueto 24in defaultParams, then on readonly set to true, the value will be reset to 24 instead of the placeholder.

So, this is just not the case with readonly but with all the parameters even when you change the theme from lightto dark.

Maybe I am missing something here but let me know what do you think.

ChristianHoffmannS2 commented 9 months ago

@usmanreal1 i think this is how storybook does things. instead of changing one attribute on the web-component, it replaces the thing with an entirely new instance.

in order to determinate if that's the issue here, we could place the number input into the example app and see how it behaves over there. i would suggest to give this a shot. if you need any help with that, you can write here :)

bar-tay commented 1 month ago

in order to determinate if that's the issue here, we could place the number input into the example app and see how it behaves over there. i would suggest to give this a shot. if you need any help with that, you can write here :)

@ChristianHoffmannS2 could you maybe explain to me what we expect from that approach of putting the input into the example app. Should I just put the current input into the example app with the readonly state and see if it behaves accordingly?