Input in Marker doesn't work

[siddharthroy12]

When I click on the map I want to render a input on that point and allow user to type in it. But If I do that the input does work for the first time but after that I'm not able to click on the text input again.

Here is the working example
https://codepen.io/siddharthroy12/pen/OPyQPGz?editors=1000

[HarelM]

Thanks for taking the time to report this issue.
Please provide a minimal reproduction. The code you shared is about 500 lines long and it's hard to understand what it does.

[siddharthroy12]

@HarelM I have updated the code. It's much simpler now. It creates a simple marker which is a input element. I just want that input element to take keyboard inputs when is it set as a marker.

Thanks

[HarelM]

I wrote the following code:

const div = document.createElement('div');
        const el = document.createElement('input');
        el.type = "text";
        el.addEventListener("click", (e) => {e.stopPropagation(); el.focus();});
        el.addEventListener("dblclick", (e) => e.stopPropagation());
        div.appendChild(el);
        // add marker to map
        new maplibregl.Marker({element: div})
            .setLngLat([-65.017, -16.457],)
            .addTo(map);

Which solves this problem, but I'm not 100% sure why the focus gets lost.
Generally speaking, you need to make sure events are not propagated to the map, otherwise it will both take the focus and not do what you want...

[siddharthroy12]

This is perfect! Thank you