Input value disappears when disabled (date picker)
Application Type
Reactive

I'm experiencing a weird behavior when combining the date picker and a disabled input (sorry for the gif quality):

When clicking the input the date picker opens and I select a date. The variable linked to the input is updated. After that I use a switch to disable the input but then the input gets empty even though its variable contains a value.

I can also click the input but instead of using the date picker to select a date, I manually type the date. The variable linked to the input is also updated. After, I disable the input but this time the input keeps its value.

Does anyone experienced something like this or knows why is this (technically) happening?

Thanks!

TheTwilightZone.oml

Dear Ruben,

To fix this case i added Javascript Element after setting the variable and did set the DOM element value by JS


 Now, it's fixed and attached the updated OML

TheTwilightZone.oml

Hey Sherif!

Thank you for spending the time addressing this issue.

Actually, I wasn't looking for a bypass or a workaround to what I've described but a technical explanation why is this happening. 

Is it a bug in the react component or did I missed something else? What is the difference between assigning a value and typing the value?

Hi Ruben,

When you select a date using the date picker calendar, the 'value' is not set in the DOM element that is why when you disable the input widget, it goes back to being blank.

On the other hand when you type a date into the input, the value is set in the DOM element, so upon disabling you still see the value in the input widget.

Regards,

AJ

Thanks AJ. So it is definitely a Date Picker (Pikaday) thing... 

Actually, I had already tried to fix this using js just like Sherif mentioned. Although It worked in the .oml I shared, the same code wouldn't work in the client's application. Nvm.

Added this to the input and it does the job.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.