dlaczego nie mogę wymusić focusa?

Mam taki kod, gdzie chciałbym wymusić focusa na elemencie <select>.

 <form id="addProducts" action="#">
    <h3><p><i>Please make your choise:</i></p></h3>
    <label  id ='label'for="stuff">Stuff:</label>
    <select tabindex= '-1' class='stuffSelect' name="stuff" id="stuffSelect"></select>
    <button type="submit">Add</button>
  </form> 

Do wymuszania focusa służyć ma taka funkcja, która jest przyczepiona do elementu label - tak do label a nie selekt, tak to własnie ma być. I ta funkcja odpala się po kliku na label, czego dowodzi wyświetlanie 'click' niemniej element focusa nie dostaje. I nie bardzo rozumiem dlaczego. Ewentualnie, czy ktoś ma inny pomysł na rozwinięcie tego otwarcie tego selecta programowo?

 onStuffLabelClick: (ev)=>{event.preventDefault(); console.log('click');this.stuffSelect.focus();},

Albo ja jestem głupia, albo to jest jakaś nowoczesna, kosmiczna składnia. Ale w każdym razie u mnie to w ogóle nie działa.
Działa poniższe:

<form id="addProducts" action="#">
  <h3><p><i>Please make your choise:</i></p></h3>
  <label  id ='label' for="stuff">Stuff:</label>
  <select tabindex= '-1' class='stuffSelect' name="stuff" id="stuffSelect"></select>
  <button type="submit">Add</button>
</form>

 document.getElementById("label").addEventListener("click", function(ev){
   console.log('click');
   document.getElementById("stuffSelect").focus();
 });

Focus działa, ale for labelki musi być taki sam jak id selecta lub select musi być zamknięty w label bez js

pablop76 napisał(a):

Focus działa, ale for labelki musi być taki sam jak id selecta lub select musi być zamknięty w label bez js

Dzięki, patrzyłem na ten mój kod i patrzyłem i nie zauważyłem, że labelka odwołuje się do nazwy pola, a nie jego ID.

OK jest lepiej, ale... niezupełnie tak jak bym chciał.

Bez js:
Po przypisaniu id selecta sytuacja wygląda tak, że select dostaje focusa, kiedy tylko najadę na label.
Natomiast przy kliknięciu go traci na moment - tylko na czas kliknięcia. Nie ma znaczenia czy select jest w środku label, czy poza label.
Z js. w wersji Frei jest dokładnie tak samo.

Pytanie czy mozliwa jest wytuacja: najeżdżam na label - nic się nie dzieje, klikam na label - element dostaje focusa na stałe?
Czy w tym celu należałoby najpierw przepisać predefiniowaną akcję label onhover (jeżeli taka jest, teraz piszę na szybko)?
Czy raczej należałoby wyjąć selecta poza form i wtedy taka wersja skryptu powinna wystarczyć?

Mógłbyś spróbować zablokować dla LABLE możliwość zselektowania go:
https://stackoverflow.com/questions/3779534/how-do-i-disable-text-selection-with-css-or-javascript

Ale nie wiem, czy to nie zabije też powiązanych z nim akcji, poeksperymentuj.