Bonjour à tous.

Nom : Zeb.png Affichages : 72 Taille : 21,1 Ko

Sur cette image, j'ai une zone qui prend le focus (entourée en orange) alors qu'elle ne devrait pas.

J'ai bien essayé de mettre de [C]tabindex="-1"[/], sur les div, les accordion mais rien y fait.

Je précise que cette zone est créée dynamiquement.

Je ne peux, malheureusement, pas mettre tout le code car c'est vraiment trop gros (développement Angular).

J'espère vous avoir donné toutes les informations nécessaires pour que vous puissiez me dépatouiller.

Merci d'avance.

Le code concerné est à partir de la ligne 170.

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
<form [formGroup]="selectFilterAirportsForm" (ngSubmit)="onSubmit()" novalidate>
  <div class="row mb-1 airport">
    <label for="airport">
      <input
        formControlName="airportControl"
        id="airport"
        name="airport"
        [typeahead]="dataSource"
        (typeaheadLoading)="changeTypeaheadLoading($event)"
        (typeaheadNoResults)="typeaheadNoResults($event)"
        (typeaheadOnSelect)="typeaheadOnSelect($event)"
        [typeaheadOptionsLimit]="5"
        typeaheadOptionField="value"
        [typeaheadItemTemplate]="airportTemplate"
        placeholder="OACI ou ville"
        [ngClass]="{
          'airport-input': true,
          'form-control': true,
          'disabled': !currentLayer,
          'is-invalid': f.airportControl.errors && (f.airportControl.touched || f.airportControl.dirty || submitted)
        }"
        spellcheck="false"
        autocomplete="off"
      /> </label
    >&nbsp;
    <i *ngIf="typeaheadLoading" class="fa fa-spinner fa-pulse"></i>
    <ng-template #airportTemplate let-model="item">
      <span>{{ model.name }} ({{ model.id }})</span>
    </ng-template>
    <div *ngIf="(f.airportControl.dirty || f.airportControl.touched || submitted) && f.airportControl.errors" class="invalid-msg">
      <div *ngIf="f.airportControl.errors.whitespace">{{ errorMsg }}</div>
    </div>
    <div class="noresult-msg" *ngIf="noResult">Aucun résultat</div>
  </div>
 
  <div class="row">
    <div class="col-6 px-0">
<!--       <div class="">
          <input
          formControlName="depAirportCheckboxControl"
          (click)="checkAeroportDep()"
          class="custom-control custom-checkbox btn-orange-fa"
          style="width:15px;height:15px;"
          type="checkbox"
          name="depAirportCheckbox"
          id="depAirportCheckbox"
        />
      <label class="custom-control-label " for="depAirportCheckbox">
          Trafic au départ
        </label>
    </div>
 -->
<!--   <input
 <label class="row recadrage-check interligne">
  formControlName="depAirportCheckboxControl"
  (click)="checkAeroportDep()"
  class="custom-control custom-checkbox btn-orange-fa taille-check"
  type="checkbox"
  name="depAirportCheckbox"
  id="depAirportCheckbox"/>
 -->
 <label class="row recadrage-check interligne">
  <input
      formControlName="depAirportCheckboxControl"
      (click)="checkAeroportDep()"
      class="custom-checkbox btn-orange-fa taille-check interligne"
      type="checkbox"
      name="depAirportCheckbox"
      id="depAirportCheckbox"/>
 <span class="recadrage-check">Trafic au départ</span>
</label>
 
<!--       <div  class="custom-control custom-checkbox btn-orange-fa "  tabindex="0" (keyup.space)="test_arr()">
        <input
          formControlName="arrAirportCheckboxControl"
          (click)="checkAeroportArr()"
          class="custom-control-input"
          type="checkbox"
          name="arrAirportCheckbox"
          id="arrAirportCheckbox"
        />
        <label class="custom-control-label" for="arrAirportCheckbox">
          Trafic à l'arrivée
        </label>
      </div>
 -->
 
 <label class="row recadrage-check interligne">
  <input
  formControlName="depAirportCheckboxControl"
  (click)="checkAeroportArr()"
  class="custom-checkbox btn-orange-fa taille-check interligne"
  type="checkbox"
  name="depAirportCheckbox"
  id="depAirportCheckbox">
<span class="recadrage-check">Trafic à l'arrivée</span>
</label>
 
 <div *ngIf="isNothingCheck() && submitted" class="invalid-msg">
        Au moins une case doit être cochée
      </div>
    </div>
    <div class="col">
      <div class="row">
<!--         <span class=" btn-orange-fa" tabindex="0">
        <label class="my-0 Souslabel">
          <input class="radioButton " type="radio" title="{{tooltipFlightPlan}}" value="Plan de vol" formControlName="planRadarControl">
            <span title="{{tooltipFlightPlan}}">Plan de vol</span>
        </label>
      </span>
 -->
        <label class="my-0">
          <input class="radioButton btn-orange-fa" type="radio" title="{{tooltipFlightPlan}}" value="Plan de vol" formControlName="planRadarControl">
            <span title="{{tooltipFlightPlan}}">Plan de vol</span>
        </label>
      </div>
      <div class="row ">
<!--         <span class=" btn-orange-fa" tabindex="0">
          <label class="Souslabel">
          <input class="radioButton " type="radio" title="{{tooltipRadar}}" value="Radar" formControlName="planRadarControl">
            <span title="{{tooltipRadar}}">Radar</span>
          </label>
          </span>
 -->
        <label class="">
        <input class="radioButton btn-orange-fa" type="radio" title="{{tooltipRadar}}" value="Radar" formControlName="planRadarControl">
          <span title="{{tooltipRadar}}">Radar</span>
        </label>
      </div>
    </div>
  </div>
 
  <div class="row">
      <label>
        Heure de départ et/ou arrivée
      </label>
  </div>
 
  <div class="row">
      <label>
        de
      </label>
      <input
        formControlName="startControl"
        type="time"
        class="form-control time debut-input"
        [ngClass]="{ 'disabled': !radarIsSelected(), 'is-invalid': f.startControl.errors && (f.startControl.touched || f.startControl.dirty || submitted) }"
        uppercase
        />
      <label>
        à
      </label>
      <input
        formControlName="endControl"
        type="time"
        class="form-control time fin-input"
        [ngClass]="{ 'disabled': !radarIsSelected(), 'is-invalid': f.endControl.errors && (f.endControl.touched || f.endControl.dirty || submitted) }"
        uppercase
        />
  </div>
 
  <div class="row">
    <div *ngIf="f.startControl.errors && (f.startControl.touched || f.startControl.dirty || submitted)" class="invalid-msg">
    </div>
    <div *ngIf="f.endControl.errors && (f.endControl.touched || f.endControl.dirty || submitted)" class="invalid-msg">
    </div>
  </div>
 
<!-- ZONE QUI PREND LE FOCUS ET QUI NE DEVRAIT PAS ! --><!-- ZONE QUI PREND LE FOCUS ET QUI NE DEVRAIT PAS ! -->
 
  <div class="row">
    <accordion [isAnimated]="false" class="accordionFilterAirport">
      <div class="shadow">
      </div>
      <accordion-group [isOpen]="isSelectedAeroportDefined() && radarIsSelected()">
        <div class="row">
          <div class="col">
            <p>Orientation</p>
            <ul class="list-group">
              <li *ngFor="let o of getOrientations(); let i = index">
                <!-- <div class="custom-checkbox custom-control">
                  <input type="checkbox" [checked]="isOrientationChecked(o)"
                  class="custom-control-input"
                  name="{{o}}"
                  id="{{o}} {{i}}"
                  (change)="clickOnOrientation($event)" />
                  <label class="custom-control-label" for="{{o}} {{i}}">{{o}}</label>
                </div> -->
                <label class="recadrage-check interligne" for="{{o}} {{i}}">
                  <input type="checkbox"
                  [checked]="isOrientationChecked(o)"
                  class="custom-checkbox btn-orange-fa taille-check interligne"
                  name="{{o}}"
                  id="{{o}} {{i}}"
                  (change)="clickOnOrientation($event)" />
                  <span class="recadrage-check">{{o}}</span>
              </label>
              </li>
            </ul>
          </div>
          <div class="col">
            <p>Piste</p>
            <ul class="list-group">
              <li *ngFor="let o of getQfus(); let i = index">
                <!-- <div class="custom-checkbox custom-control">
                  <input type="checkbox" [checked]="isQfuChecked(o)"
                  class="custom-control-input"
                  name="{{o}}"
                  id="{{o}} {{i}}"
                  (change)="clickOnQfu($event)" />
                  <label class="custom-control-label" for="{{o}} {{i}}">{{o}}</label>
                </div> -->
                <label class="recadrage-check interligne" for="{{o}} {{i}}">
                <input type="checkbox" [checked]="isQfuChecked(o)"
                  class="ustom-checkbox btn-orange-fa taille-check interligne"
                  name="{{o}}"
                  id="{{o}} {{i}}"
                  (change)="clickOnQfu($event)" />
                  <span class="recadrage-check">{{o}}</span>
                </label>
              </li>
            </ul>
          </div>
        </div>
      </accordion-group>
    </accordion>
  </div>
</form>

Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
.btn-orange-fa:focus, .btn-orange-fa:active {
  outline-color: orange;
  outline-style: solid;
  outline-width: 3px;
  box-shadow: none;
/*  margin-right: 17px; /* Utilie si on fait un cadre tout autour du label, sinon, pas utilisé */
}
 
.recadrage-check {
  margin-left:5px;
}
 
.taille-check {
  width:15px;
  height:15px;
  cursor: pointer;
}
 
.interligne {
  margin-top:1px;
  line-height:19px;
}
 
.btn-orange-fa2 {
  border-color: chartreuse;
}
 
form {
  width: 18rem;
}
 
.airport-input {
  margin-bottom: -0.5rem;
  width: 13rem;
  max-width: 13rem;
  margin-left: 1rem;
}
 
.is-invalid {
  border: 2px solid rgb(255, 162, 34) !important;
  background-image: none;
}
 
.invalid-msg {
  color: rgb(255, 162, 34);
  font-size: 11px;
  font-style: italic;
  text-align: center;
  display: block;
}
 
.noresult-msg {
  color: rgb(255, 162, 34);
  font-size: 11px;
  font-style: italic;
  text-align: center;
  display: block;
}
 
.custom-control-label {
  cursor: pointer;
  color: white;
  font-size: 16px;
}
 
.custom-control-label:focus,  .custom-control-label:active{
  cursor: pointer;
  color: white;
  font-size: 16px;
}
 
label {
  font-size: 16px;
  margin-right: .5rem;
}
 
.Souslabel {
  font-size: 16px !important;
}
 
 
/**
 * First part of the accordion into the sidenav.
 */
 ::ng-deep .accordionFilterAirport .card-header {
  padding: 0 !important;
  border: none !important;
  border-radius: 0% !important;
  text-align: center !important;
  font-size: 16px !important;
}
 
/**
 * Second part of the accordion into the sidenav.
 */
::ng-deep .accordionFilterAirport .card-body {
  padding: 0 !important;
  width: 18rem;
  margin-top: 1rem;
  max-height: 10rem;
  overflow-y: auto;
  overflow-x: hidden;
}
 
.airport {
  display: block;
}
 
/**
 * The accordion into the sidenav.
 */
::ng-deep .accordionFilterAirport .card {
  background-color: transparent !important;
  border: none !important;
}
 
p {
  margin-top: 0;
  margin-bottom: 1rem;
  background-color: rgb(255,255,255,0.2);
  text-align: center;
  width: 6rem;
}
 
li {
  list-style-type: none;
}
 
::ng-deep .accordionFilterAirport .panel-title {
  margin-top: 1.5rem !important;
}

Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
(styles généraux)
 
html,
body,
.viewport {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  font-family: Marianne, 'Roboto', sans-serif;
}
 
/* redéfinition du focus*/
:focus {
  outline-color: orange;
  outline-style: solid;
  outline-width: 3px;
  box-shadow: none;
}
 
 button:focus, button:active {
  border-color: orange !important;
  border-width: 3px !important;
}
 
input:focus, input:active {
  border-color: orange !important;
  border-width: 3px !important;
}
 
select:focus, select:active {
  border-color: orange !important;
  border-width: 3px !important;
}
 
div:focus, div:active {
  border-color: orange !important;
  border-width: 3px !important;
}
 
span:focus, span:active {
  border-color: orange !important;
  border-width: 3px !important;
}
 
.btn-orange-gen:focus, .btn-orange-gen:active {
  outline-color: orange;
  outline-style: solid;
  outline-width: 3px;
/*box-shadow: none;*/
}
 
 
.tab-content {
  height: 100%;
}
 
.vbox {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
 
/* popup */
.mapLeaflet .leaflet-pane .leaflet-popup .leaflet-popup-content-wrapper {
  width: auto !important;
  height: auto !important;
  background-color: transparent;
}
/* popup target */
.mapLeaflet .leaflet-pane .leaflet-popup .leaflet-popup-tip {
  background-color: white;
}
 
/*Allow to fire events from under layer. Apply to the front layer.*/
.mapLeaflet .leaflet-pane .leaflet-plots-pane {
  pointer-events: none;
}
 
.dropdown-menu.open {
  border: 1px solid rgb(3, 42, 85);
  background-color: white;
  border-radius: 2%;
  font-size: 10px;
  overflow-x: auto;
  width: 230px;
}
 
.dropdown-menu.open > .dropdown-item {
  color: rgb(3, 42, 85);
  border-bottom: 0.5px dashed rgb(3, 42, 85, 0.3);
  white-space: normal;
  font-size: 12px;
}
 
.dropdown-item.active,
.dropdown-item:active {
  text-decoration: none;
  background-color: rgb(255, 162, 34, 0.8);
}
 
.dropdown-menu.open > .dropdown-item:hover {
  color: white;
}
 
.dropdown-header {
  color: rgb(255, 162, 34);
  text-align: center;
  padding: 0.5rem 0.5rem;
  background-color: rgb(3, 42, 85, 0.1);
}
 
.departure > .dropdown-menu.open,
.arrival > .dropdown-menu.open {
  margin-left: -4.6rem;
}
 
/* width */
::-webkit-scrollbar {
  width: 3px;
  scroll-margin: 0;
}
 
/* Track */
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: inherit;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background-color: rgba(34, 130, 255, 0.8);
  border-radius: 0%;
}
 
.leaflet-lasso-active {
  cursor: crosshair;
  user-select: none;
}
 
.leaflet-lasso-active .leaflet-interactive {
  cursor: crosshair;
  pointer-events: none;
}
 
.leaflet-lasso-inactive {
  cursor: pointer;
}
 
/**
 * Margin for the calendar.
 */
body > bs-daterangepicker-container {
  left: 10rem !important;
  top: 0.1rem !important;
}
 
/**
 * Calendar.
 */
body > bs-daterangepicker-container > div {
  box-shadow: 0 0 5px 0 #aaa !important;
  margin-left: 35.8rem;
  margin-top: -3.5rem;
}
 
/*************************************************************************************************************
SideNav
**************************************************************************************************************/
 
/**
 * First part of the accordion into the sidenav.
 */
.accordionSidenav .card-header {
  padding: 0 !important;
  border: none !important;
  border-radius: 0% !important;
  text-align: center !important;
  font-size: 11px !important;
  margin-top: -4px;
}
 
/**
 * Second part of the accordion into the sidenav.
 */
.accordionSidenav .card-body {
  padding: 0 !important;
  height: calc(100vh - 60px - 2px - 0.8rem - 0.5px - 17px);
}
 
/**
 * The accordion into the sidenav.
 */
.accordionSidenav .card {
  background-color: transparent !important;
  border: none !important;
}
 
/*.leaflet-control-mouseposition{
  float:right!important;
}
 
.mouse-position-container {
  position: absolute;
  right:201px;
  max-height: 16px;
}
 
.mouse-position-content{
  background: rgba(255, 255, 255, 0.7);
  color:black;
  padding-left:5px;
  padding-right:5px;
}*/
 
@font-face {
  font-family: 'Marianne-Bold';
  src: local('Marianne-Bold'), url(/assets/fonts/marianne/Marianne-Bold.otf) format('truetype');
}
@font-face {
  font-family: 'Marianne';
  src: local('Marianne'), url(/assets/fonts/marianne/Marianne-Regular.otf) format('truetype');
}