Label doesn't become active

Mson commented 3 years ago

It doesn't break upon load, however if you interact with it these issues happen.

From what I could gather, is this how the html is rendered. This uses the annotations in dotnet.

[Display(Name = "Date time picker")]
[FormPartType(FormPartType.DateTime)]
public DateTime? DateTimePicker { get; set; }

To implement the date time picker, a script is loaded in the .cshtml with the following code.

$(".connxt-component.date-time").dateTimePicker();

Marcin Luczak staff commented 3 years ago

This is unusual behavior for interaction with the component. It might be a problem with integration with.net application. Do you load the DateTimePicker component after all the MDB scripts are loaded into the page? Can you please provide the html output of the component from the developer tools, or best host your example in our MDB GO https://mdbootstrap.com/docs/standard/cli/ and share the result?

Mson commented 3 years ago

The DateTimePicker should indeed be loaded after the MDB scripts. Otherwise we should have problems withe the other components. This is the rendered html in the developer tools.

<div class="md-form">
    <input class="form-control date-time picker-opener connxt-component valid" data-open="DateTimePickerDatePicker" id="DateTimePicker" name="DateTimePicker" type="text" tabindex="63" aria-invalid="false">
    <label for="DateTimePicker" class="active">
        Date time picker
    </label>
    <input class="datepicker form-control time-date-ghost picker__input" id="DateTimePickerDatePicker" type="text" readonly="" aria-haspopup="true" aria-expanded="false" aria-readonly="false" aria-owns="DateTimePickerDatePicker_root" tabindex="64">
    <!-- 200 lines of the picker missing here -->
    <input type="hidden" name="_submit" value="2021/09/23" tabindex="72">
    <input class="form-control timepicker time-date-ghost" data-open="DateTimePickerDatePicker" type="text" tabindex="73" style="">
</div>

A part is missing due to it being 200 lines of the picker modal. So i pasted it elsewhere to keep it a bit shorter here. https://pastebin.com/GpuWiFtf

Marcin Luczak staff commented 3 years ago

Your output HTML looks fine. Can you also share your original HTML structure for this file/chunk of code? Is DateTimePicker called directly on page load or is it loaded dynamically based on some condition?

Please check whether the component is working properly on a clean app setup, without any side components and imports, maybe something is interfering with its performance

Mson commented 3 years ago

So I dived into the MDBootstraps code. In the forms-free.js there are two points of interest. There are the updateTextFields($input) and toggleActiveClass($this, action) methods.

The toggleActiveClass method is responsible for changing the active class of the label. This is the place where my label receives the command to remove the active class.

In updateTextFields method it is determined of an input should change its styling. It does this by only looking for the input given in the parameter. I would say this method need an extra check to see if it is part of multiple inputs.

Would you say that this is indeed the place where the bug occurs, @Marcin Luczak?

Marcin Luczak staff commented 3 years ago

This might be an issue as you are not providing a placeholder to the main input of the DateTimePicker and updateTextFields consider it as an empty input, thus it removes the active class. This would also mean that your main input element is not properly updated and this might be an issue with the DateTimePicker itself. Also your output HTML label has active class and it should not be overlapping input's value, which means it's not label overlapping the input. Can you select overlapping element in the devtools?

Have you tried running this code on the fresh setup, without .net and any other components?

Your second input element has datepicker class, which is not present in the DateTimePicker documentation. It might be causing problems as I can't really tell how your components are called in .net notation and datepicker somehow could be auto calling itself before datetimepicker.

It would be the best if you could just post your input HMTL values or publish your page so I can better check the problem, as I am unable to reproduce it neither locally, nor in the snippets.