material select label and input focus

Topic: material select label and input focus

ionyx pro asked 4 years ago

Expected behavior 1. When form loads and material select has an option selected, label should show above the selected value. 2. When clicking on an input field and clicking on the actual label text, form input should get focus and allow input

Actual behavior 1. Label shows over the top of the selected value and is unreadable 2. when you click on the label, the label does not move up and you cannot enter a value. You have to click in a blank space of the input label to get focus and be able to enter a value

Resources (screenshots, code snippets etc.) Code snippet

Have tried other suggestions in support forum, but does not work. Also was using 4.8.7 and saw there is now 4.8.8, but it is not fixed.

I had raised a ticket a while ago about point 2 and it had been fixed in the past, but seems to be an issue again.

Thank you

lemons free commented 4 years ago

class="mdb-main-label" for select label is required

Add comment

Marta Wierzbicka staff answered 4 years ago

0 0 Best answer

Hi,

try code from this snippet: https://mdbootstrap.com/snippets/jquery/marta-szymanska/1059326.

Best, Marta

ionyx pro commented 4 years ago

Hi @Marta Szymanska

Thank you for that snippet, and yes, it does seem to solve those issues.

However, it does introduce another issue for the select boxes and the way the first option is setup. In previous documentation on your site, the way to set the select was: Please select

However, if you leave the "selected" in this option, any saved values and then set to selected from a saved form will never show.

So you remove the selected from the disabled first option, and a saved value will now display.

However, this causes an issue when you are creating new records and you leave the select box without selecting any new value, for an optional field.

When you submit the form, the first actual real option value is being sent to the server and then saved against the record. This will mean all optional fields will now be saving the first value from select boxes, even though on the form nothing is selected.

I'm guessing that since the first option is disabled, it is defaulting to seeing the first option with a value, even though it has not been selected.

Hi <a href="/profile/?id=15082" target="_blank" rel="nofollow">@Marta Szymanska</a>

Thank you for that snippet, and yes, it does seem to solve those issues.

However, it does introduce another issue for the select boxes and the way the first option is setup. In previous documentation on your site, the way to set the select was:
Please select

However, if you leave the "selected" in this option, any saved values and then set to selected from a saved form will never show.

So you remove the selected from the disabled first option, and a saved value will now display.

However, this causes an issue when you are creating new records and you leave the select box without selecting any new value, for an optional field.

When you submit the form, the first actual real option value is being sent to the server and then saved against the record. This will mean all optional fields will now be saving the first value from select boxes, even though on the form nothing is selected.

I'm guessing that since the first option is disabled, it is defaulting to seeing the first option with a value, even though it has not been selected.

Please insert min. 15 characters.

Marta Wierzbicka staff commented 4 years ago

Hi,

we will look deep into this problem and try to fix this as soon as possible.

Best, Marta

Add comment

Marta Wierzbicka staff answered 4 years ago

0 0 Best answer

Hi,

thank you @lemons for your answer. Do you need more help @ionyx?

Best, Marta

ionyx pro commented 4 years ago

Yes, it doesnt solve the issue.

I have updated: https://mdbootstrap.com/snippets/jquery/ionyx/1050164

When you load the page, the pre-selected value does not show, it only shows the label.

Also issue #2 remains, if you click on the actual text "Address 1" in the input field, there is no response from the input element, you have to click outside the "Address 1" part.

Thank you.

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 jQuery
MDB Version: 4.8.8
Device: Mac
Browser: Chrome
OS: osx
Provided sample code: No
Provided link: Yes

ionyx

Pro User 87Support score
5Questions 9Answers 3Snippets