Select on focus

novatechsk asked 3 years ago

When I click on select focus method not working, while if I switch focus to change it's working.

document.querySelector("#shirtEdit").addEventListener("focus", function () { console.log(this.value); console.log("focus done"); })


novatechsk commented 3 years ago

this worksdocument.querySelector("#shirtEdit").previousElementSibling.firstElementChild.addEventListener("focus", function () { console.log(this.value); })


Dawid Wajszczuk staff commented 3 years ago

Hi. Can you provide a snippet with this issue https://mdbootstrap.com/snippets/? Also describing it in more details will help.


novatechsk commented 2 years ago

here is a snippet https://mdbootstrap.com/snippets/standard/novatechsk/4047146 I need to store the original and changed value of select to pass it to ajax.


Grzegorz Bujański staff commented 2 years ago

Unfortunately the snippet you created doesn't work - maybe you didn't click the publish button


novatechsk commented 2 years ago

Hello, try it now.


Grzegorz Bujański staff answered 2 years ago

This is because our Select is an overlay for native select. And so our overlay is really focused, not the native element. I modified your snippet to get the effect you want: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/4056987


novatechsk commented 2 years ago

yop that is working. I have another question how to get this to work with dynamically created selects by ajax?


Grzegorz Bujański staff answered 2 years ago

After adding elements dynamically, you need to execute the same code - find the element that has been dynamically added and attach events to it.

I prepared a simple snippet that adds dynamically select to the wrapper and add events after adding and initializing select: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/4065089#html-tab-view


novatechsk commented 2 years ago

this is working. But when I created selects with ajax it's not.


Grzegorz Bujański staff commented 2 years ago

Can you prepare a snippet with this problem? I'll check what's going on


novatechsk commented 2 years ago

Here is a snippet example. https://mdbootstrap.com/snippets/standard/novatechsk/4111844


novatechsk commented 2 years ago

this is working https://mdbootstrap.com/snippets/standard/novatechsk/4114117


Grzegorz Bujański staff commented 2 years ago

Unfortunately both snippets do not work. You probably didn't click the publish button


novatechsk commented 2 years ago

published .


Grzegorz Bujański staff answered 2 years ago

You must execute init after fetching the data. In the snippet you sent, it first executes the code that tries to initialize the component, and then the data is loaded.

Check out this snippet: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/4136452#js-tab-view I modified your code to make the components initialize correctly


Please insert min. 20 characters.

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: MDB5 3.9.0
  • Device: PC
  • Browser: Chrome
  • OS: W10 Pro
  • Provided sample code: No
  • Provided link: No