Fix: a click outside of the regions' Dropdown closes it

This commit is contained in:
Valentin Kaelin 2019-08-21 23:22:16 +02:00
parent f366e20b22
commit 47b0c282d6

View file

@ -1,5 +1,6 @@
<template> <template>
<form @submit.prevent="formSubmit" class="flex text-teal-100 text-lg w-full"> <form @submit.prevent="formSubmit" class="flex text-teal-100 text-lg w-full">
<div v-if="dropdown" @click="dropdown = false" class="fixed z-20 inset-0"></div>
<div class="relative w-full"> <div class="relative w-full">
<input <input
type="text" type="text"
@ -7,7 +8,7 @@
class="input w-full px-2 py-4 rounded-lg outline-none pl-8 pr-16 font-bold" class="input w-full px-2 py-4 rounded-lg outline-none pl-8 pr-16 font-bold"
v-model="summoner" v-model="summoner"
> >
<div class="absolute right-0 vertical-center flex items-center h-full mr-2"> <div class="absolute right-0 z-30 vertical-center flex items-center h-full mr-2">
<div <div
@click="dropdown = !dropdown" @click="dropdown = !dropdown"
:class="{'bg-teal-600' : dropdown}" :class="{'bg-teal-600' : dropdown}"
@ -27,8 +28,7 @@
> >
<div <div
v-if="dropdown" v-if="dropdown"
@click="dropdown = !dropdown" class="absolute right-0 z-30 text-white rounded-b shadow cursor-pointer mr-2 offsetDropDown"
class="absolute right-0 text-white rounded-b shadow cursor-pointer mr-2 offsetDropDown"
> >
<div <div
v-for="(region, index) in regions" v-for="(region, index) in regions"