Pedro Domingues
Rank: #153
1092Views
8Comments
[Input Masks Library] Cannot read property 'classList' of null
Question
Forge
Input Masks Library
Forge component by Labs
12
Published on 19 Feb 2021

Hi there,

I am using the credit card mask but i keep receveing the error Cannot read property 'classList' of null every time i change the input. (check the attached image)

My implementation is exactly the same as the one from Demo provided.

Any insights?

Untitled.png

0
0
on 2018-02-27
Copy link to comment
Maurilio Macedo
Rank: #2393

Temporary solution!

In the FindClosest action, at line 19 of JS, add the check before: [element.parentElement !== null && ...]

Corrected line:

if(element.parentElement !== null && !element.parentElement.classList.contains('screen')) {

5
0
on 2018-03-01
Copy link to comment
Jack Wong
Rank: #3427

Maurilio Macedo wrote:

Temporary solution!

In the FindClosest action, at line 19 of JS, add the check before: [element.parentElement !== null && ...]

Corrected line:

if(element.parentElement !== null && !element.parentElement.classList.contains('screen')) {

Thank you for your solution, it's work!


0
0
on 2020-05-06
Copy link to comment
M I
Rank: #46037

Maurilio Macedo wrote:

Temporary solution!

In the FindClosest action, at line 19 of JS, add the check before: [element.parentElement !== null && ...]

Corrected line:

if(element.parentElement !== null && !element.parentElement.classList.contains('screen')) {

Hi,

In my Reactive application, every time I access the page, it shows that null error and the input field is always non-editable, even when it's dynamically enabled.

Where exactly can I find that 'FindClosest' action? Also, would it resolve the issue regarding the input field being non-editable?

Thank you.

0
0
on 2020-08-25
Copy link to comment
Samuel Jesus
Staff
Rank: #206

Hello,

I've talked with Pedro Domingues, and the issue is being caused by the fact that the component was used in an empty screen, without any layout. With the layout, the problem stopped.

Nevertheless, we will add this to our backlog to improve the component.


Also, Maurilio is right: changing that line will prevent the issue from happening. However, in this particular case, since the screen class was never there, the functionality would still be impacted.


Cheers,

Samuel Jesus

0
0
on 2018-03-02
Copy link to comment
Tiago Agostinho
Rank: #1769

Samuel Jesus wrote:

Hello,

I've talked with Pedro Domingues, and the issue is being caused by the fact that the component was used in an empty screen, without any layout. With the layout, the problem stopped.

Nevertheless, we will add this to our backlog to improve the component.


Also, Maurilio is right: changing that line will prevent the issue from happening. However, in this particular case, since the screen class was never there, the functionality would still be impacted.


Cheers,

Samuel Jesus


Hi! 

I'm having the same problem and I'm using the component with layout.

But the Maurilio Macedo solution works fine. 


Thanks


0
0
on 2019-11-16
Copy link to comment

Just downloaded this component and it still has the error :)

0
0
on 2019-10-23
Copy link to comment
M I
Rank: #46037

Hi,

I've managed to find that action and changed that specific line. However, the input still remains non-editable. Do you know why?

Thank you.

0
0
on 2020-08-26
Copy link to comment

Hi, I have the same issue, but in my case, I'm trying to use it in the currency format. Adding the code "element.parentElement !== null && " the error message doesn't appear but the input become "disable".

0
0
on 27th Jan
Copy link to comment