83
Views
5
Comments
Solved
[Debounce Reactive] Debounce on multiple text areas on the same form
debounce
Reactive icon
Forge asset by Vincent Koning
Application Type
Reactive

Hi Vincent,

Thanks for creating this asset. It has been working well.

I am getting the error below when I have debounce bound to two different text areas on the same form. It works fine with multiple text inputs and with one text area. 

Cannot read properties of null (reading 'type') 

TypeError: Cannot read properties of null (reading 'type')

at osDebounce

Any help would be appreciated.

Many thanks

2022-08-03 04-32-50
Ravi Punjwani
Solution

Hi Mitch,

I found what went wrong with your app. Find the fixed OML attached with this. I'm happy that it was only 1-minute fix.

You've placed Debounce widgets at the end of the page. Technically, no problems with that and it should have worked flawlessly. But I see one of your textareas was placed inside an IF container, meaning it would be rendered only when that condition satisfies, which it didn't actually on the page load. Hence the Debounce widget cannot find that element resulting in an error.

I've placed both the widgets closer to their textboxes, so they both show and hide together, without one of them worrying for the other to exist on page.

This also adds a lot more readability on your code. Now it's so easy to understand, which widget belongs to which input control.

Cheers!

DebounceTroubleshooting_v2.oml
2023-06-09 06-39-13
Mitch Grant

Cheers Ravi, legend.

2020-09-21 08-42-47
Vincent Koning

Hi, can you perhaps share the OML of a proof-of-concept app? What you try to do is something that I also have done a lot and never run into issues. I'm wondering how your configuration looks like.

Are you sure that the debounce widgets are after the input widgets?

2022-08-03 04-32-50
Ravi Punjwani

Hi Mitch,

Can you also check if you've configured different widget IDs for both textareas when configuring the Debounce?

Also for ease of reference, you can even download the demo app of this component, which contains several inputs on demo screen.

I've modified that demo screen a bit to include two text areas for your reference. Here's the URL

https://personal-t4mpz2cn.outsystemscloud.com/DebounceDemo/Demo

2023-06-09 06-39-13
Mitch Grant

Thanks both for the quick responses. I have no doubt it is something that I am doing wrong.

Example OML attached.

The first text area will trigger the 'Saving' message. The second will not. The error seems to occur on screen initialisation.

  • The debounce widgets are at the very bottom of the block
  • I am using the default text area IDs assigned in Studio
DebounceTroubleshooting_v2.oml
2022-08-03 04-32-50
Ravi Punjwani
Solution

Hi Mitch,

I found what went wrong with your app. Find the fixed OML attached with this. I'm happy that it was only 1-minute fix.

You've placed Debounce widgets at the end of the page. Technically, no problems with that and it should have worked flawlessly. But I see one of your textareas was placed inside an IF container, meaning it would be rendered only when that condition satisfies, which it didn't actually on the page load. Hence the Debounce widget cannot find that element resulting in an error.

I've placed both the widgets closer to their textboxes, so they both show and hide together, without one of them worrying for the other to exist on page.

This also adds a lot more readability on your code. Now it's so easy to understand, which widget belongs to which input control.

Cheers!

DebounceTroubleshooting_v2.oml
2023-06-09 06-39-13
Mitch Grant

Cheers Ravi, legend.

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