Div cliquable au dessus d'un input

Bonjour,

J'ai une liste déroulante où la liste de choix (<div>) s'affiche au dessus d'une checkbox (<input>).
Le problème est que la checkbox reste sélectionnable quand elle est masqué par la liste déroulante.

J'ai utilisé z-index (css) pour afficher la liste déroulante au dessus de la checkbox.
Je n'ai pas envie de déplacer ma liste déroulante après ma checkbox dans le dom HTML.

J'ai pris une capture vidéo pour montrer le problème, existe t'il un attribut ou une méthode js pour résoudre le problème ?

La vidéo : https://youtu.be/X8oZCwKCo54

Salut,

Première fois que je vois un problème sur le forum exposé en video youtube hahah tu m'as régalé !

Bon sinon plus sérieusement c'est étrange. Tu utilises une librairie (js ou css) pour gérer tout ça ? Si ce soucis n'est pas déjà en ligne, tu pourrais reproduire ton problème dans un https://jsfiddle.net/ ou un https://codepen.io/pen/ plutôt ? Juste de visu c'est un peu chaud de deviner...

Hé hé de rien

Pour approfondir, j'utilise spectrum css de Adobe. Je ne peux pas écrire tout mon code ici car j'utilise des feuilles de styles externes pour le coup, par contre je partage le bout de code qui fait défaut.

L'élément div permettant de montrer la liste de choix :

<div class="spectrum-Popover spectrum-Popover--bottom spectrum-Dropdown-popover" style="width: 100%;"  id="popover" >
				<ul class="spectrum-Menu" role="listbox">
					<li class="spectrum-Menu-item" role="option" tabindex="0">
						<span class="spectrum-Menu-itemLabel">Ballard</span>
						<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false">
							<use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
						</svg>
					</li>
					<li class="spectrum-Menu-item" role="option" tabindex="0">
						<span class="spectrum-Menu-itemLabel">Fremont</span>
						<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false">
							<use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
						</svg>
					</li>
					<li class="spectrum-Menu-item" role="option" tabindex="0">
						<span class="spectrum-Menu-itemLabel">Greenwood</span>
						<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false">
							<use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
						</svg>
					</li>
					<li class="spectrum-Menu-divider" role="separator"></li>
					<li class="spectrum-Menu-item is-disabled" role="option">
						<span class="spectrum-Menu-itemLabel">United States of America</span>
						<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false">
							<use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
						</svg>
					</li>
				</ul>
			</div>

La case à cocher :

 <label class="spectrum-Checkbox">
			<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox">
			<span class="spectrum-Checkbox-box">
				<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false">
					<use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
				</svg>
				<svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false">
					<use xlink:href="#spectrum-css-icon-DashSmall" />
				</svg>
			</span>
			<span class="spectrum-Checkbox-label">Checkbox</span>
		</label>

J'ai placé la case à cocher après la liste de choix dans le dom HTML donc normalement, la case à cocher devrait être affichée par dessus la liste de choix. J'ai utilisé la propriété style.zIndex en Javascript (z-index en CSS) pour afficher la liste par dessus la case à cocher.

L'élément liste déroulante : https://opensource.adobe.com/spectrum-css/components/dropdown/

La liste déroulante est en réalité un bouton et un popover.

Le popover : https://opensource.adobe.com/spectrum-css/components/popover/

La case à cocher : https://opensource.adobe.com/spectrum-css/components/checkbox/

Merci pour votre aide