Input field label doesn't update styles when value set

WordPress database error: [Can't create/write to file '/tmp/#sql-temptable-4db-5c9cc0-11.MAI' (Errcode: 28 "No space left on device")]
SELECT p.* FROM wp_mdb_forum_posts AS p LEFT JOIN wp_mdb_forum_posts AS q ON( q.Id = p.ParentId AND p.Id = q.AcceptedAnswerId ) WHERE p.PostTypeId = 2 AND p.ParentId = 111716 GROUP BY p.Id ORDER BY CASE WHEN q.Id IS NOT NULL THEN 1 ELSE 0 END DESC, p.UpvoteCount DESC, p.CreationDate ASC

Topic: Input field label doesn't update styles when value set programmatically

somboo asked 5 years ago

3 0

*_Expected behavior_*When an input field value is set programmatically, the label should move up...consistent with MD style labels.

*_Actual behavior_*The input behaves properly when clicked manually, but not when the value is set via javascript. So, the value set in the field has the label displayed on top of it.

I have tried programmatically triggering various events, such as change, input, focus, and others, after updating the value and the result was the same each time.

*_Resources (screenshots, code snippets etc.)_*The html and javascript below do successfully update the value of the input, on button click, and the new value does display, however, it displays with the input label obscuring the value.

<br/>
<div class="form-outline">
  <input type="text" id="form1" class="form-control" />
  <label class="form-label" for="form1">Example label</label>
</div>
<br/>
<button type="button" id="set_value" class="btn btn-primary">Set Value</button>


        document.querySelector('#set_value').addEventListener('click', ()=>{
          document.getElementById('form1').value = 'Some new value';
        });

somboo commented 5 years ago

Well, I found the solution myself. I'm sharing it here in case anyone else needs it. Add the following code to your function after you've changed all of the values for the page:


    document.querySelectorAll('.form-outline').forEach((formOutline) => {
                new mdb.Input(formOutline).init();
            });

It appears that instead of responding to a change event and handling it properly, the Input object has to be reinitialized each time a change is made programmatically.

somboo commented 5 years ago

A bit more info on this. The same behavior appears to occur when a user enters the value and then uses the browser back and forward buttons to move off of the page and back again. It is properly displayed when the user leaves the page and then, when they return, the label is covering the value. It seems to me that moving the handling of these events into the Input, rather than requiring the developer to reinitialize each time, would result in more consistently appropriate behavior.

somboo commented 5 years ago

Okay, more related problems. I'm now trying to work with a select. I was having issues with the label when I set the value using javascript, so I tried using the setValue method on the mdb.Select. That did get the label out of the select, but it is now under the select and does not do the floating to the top animation. Any suggestions? I tried using the setValue method, but found that it only works when I create a new Select because mdb.Select.getInstance is returning null when I send it a properly formatted select. Creating it new works, but it also creates another select...which is not what I want.

To sum up, the biggest issue is that the following code doesn't work because the instance is null. Any suggestions?


const select = document.querySelector('#mySelect');
const instance = mdb.Select.getInstance(select);
instance.setValue('value');

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

User: Free
Premium support: No
Technology: MDB Standard
MDB Version: 3.0.0
Device: All
Browser: Chrome
OS: All
Provided sample code: No
Provided link: No

somboo

21Support score
3Questions 0Answers

0Snippets likes 0Snippets