Cannot read properties of null (reading 'classList') when us

Topic: Cannot read properties of null (reading 'classList') when using Input.getOrCreateInstance(inputElement);

Somebody pro asked 2 months ago

Hi,

I load the content of my modal asynchronously like there, within my modal something similar to this :

<div class="form-outline" data-mdb-input-init>
  <input type="text" id="test" class="form-control" />
  <label class="form-label" for="test">Example label</label>
</div>

const inputElement = modalBodyElement.querySelector('#test');
if (inputElement instanceof Element)
    Input.getOrCreateInstance(inputElement);

This case provokes the following error: Cannot read properties of null (reading 'classList')

Add comment

Somebody pro answered 1 week ago

0 0 Best answer

<p>The <code>data-mdb-input-init</code> takes place in the wrapping <code>.form-outline</code> so it would only makes sense that the wrapper and not the input itself has to be initialized. But it is not always obvious to the senses especially because others elements can be init directly.</p>

<pre class="prettyprint"><code><div class="form-outline" data-mdb-input-init>
  <input type="text" id="test" class="form-control" />
  <label class="form-label" for="test">Example label</label>
</div>
</code></pre>

<p>as such, he correct js is the following :</p>

<pre class="prettyprint"><code>const inputElement = modalBodyElement.querySelector('#test');
if (inputElement instanceof Element)
    Input.getOrCreateInstance(inputElement.parentElement);
</code></pre>

<p>.parentElement, the right way would be to directly init all the <code>.form-outline</code> document wide.</p>

Please insert min. 20 characters.

The data-mdb-input-init takes place in the wrapping .form-outline so it would only makes sense that the wrapper and not the input itself has to be initialized. But it is not always obvious to the senses especially because others elements can be init directly.

<div class="form-outline" data-mdb-input-init>
  <input type="text" id="test" class="form-control" />
  <label class="form-label" for="test">Example label</label>
</div>

as such, he correct js is the following :

const inputElement = modalBodyElement.querySelector('#test');
if (inputElement instanceof Element)
    Input.getOrCreateInstance(inputElement.parentElement);

.parentElement, the right way would be to directly init all the .form-outline document wide.

More here and here

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Standard
MDB Version: MDB5 9.2.0
Device: desktop
Browser: brave
OS: linux
Provided sample code: No
Provided link: Yes

Somebody

Pro User 0Support score
1Questions 2Answers 0Snippets