Hooking MDB Select's Focus Event

@kpienkowska: Thanks for sharing the code snippet and the follow-up reply.

I'd already tried essentially the same thing on a select before pinging you, but this didn't work:

document.querySelectorAll('#registrationForm input.select-input').forEach((element) =>
{
    element.addEventListener('focus', (event) =>
    {
        console.log(event);
    });
});

i.e. Take our form and add focus event listeners on all of the inputs that have the .select-input class, which is one added by MDB in the main DOM for an MDB select.

On top of that, for test purposes I had also a bit of a temporary fudged wrapper around the above to add the event listener only after allowing sufficient time for MDB's deferred JS to load and create the replacement inputs, which can take a few seconds if the client's Internet speed is slow.

With the fudge in place, the elements were found and the event hooked but would never fire. Possibly this is because instead of the added input getting the focus, a shadow root div beneath the new input may be getting the focus instead, and AFAIK focus events don't bubble up/cascade.

Rather than worrying about the shadow root element, as an alternative approach I eventually looked at delegated events on the entire form. This is also a better solution because it avoids our fudged wrapper since we don't have to wait for MDB to finish setting up the replacement inputs. For that we can use focusin events instead, which do bubble up/cascade. I finally found a solution which worked for us so sharing here in case it helps someone else:

document.getElementById('registrationForm').addEventListener('focusin', (event) =>
{
    if (event.target.classList.contains('select-input'))
    {
        console.log(event.target); // do stuff
    }
});

Similarly, for someone looking for a blur event on an MDB Select, they can possibly use focusout if there isn't something more suitable.