Unselecting and other weird behaviors like tapping outside deselect sometimes when the app is...

This is very weird, when you select the same hour that you selected it should deselect it but it doesn't work when tested on a real phone. When i test it in my pc using mobile size 290 width pixels works fine but then in a real phone it doesnt, to make it even more weird is that the problem happens in angular and remix but not in next.js. In next.js the feature works just fine. The logic is not the issue as I've already tested that in multiple ways and it works fine if the feature is next.js but the problem will arise in angular and remix.

Angular.

HTML:

<!--Third form-->
<div class="form_outer_div">
<div class="icon__wrapper_form">
<p class="what_is_this_section_about">
Operating Times
</p>
<button *ngIf="!thirdForm" (click)="openCloseThirdForm()" class="icon__styling__form">
<lucide-angular ="ChevronDown" class="open_close_forms_icons"/>
</button>

<button *ngIf="thirdForm" (click)="openCloseThirdForm()" class="icon__styling__form">
<lucide-angular [img]="ChevronUp" class="open_close_forms_icons"/>
</button>
</div>

<div *ngIf="thirdForm" class="centering_grid_div_content_base_class_no_border">
<div>
<p class="gray_p">Choose Operating Time</p>
<input class="input_fields" readonly/>
<div class="centering_grid_div_content_base_class_no_border">
<div class="flex_centering_no_border">

<div class="flex_centering_no_border">
<p class="small_gray_p">opening time</p>

<button *ngIf="!openingTimeSection" (click)="handleOpeningTimeSection()">
<i-lucide [img]="ChevronDown" />
</button>

<button *ngIf="openingTimeSection" (click)="handleOpeningTimeSection()">
<i-lucide [img]="X" />
</button>
</div>

<div class="flex_centering_no_border">
<p class="small_gray_p">closing time</p>

<button *ngIf="!closingTimeSection" (click)="handleClosingTimeSection()">
<i-lucide [img]="ChevronDown"/>
</button>

<button *ngIf="closingTimeSection" (click)="handleClosingTimeSection()">
<i-lucide [img]="X"/>
</button>
</div>
</div>

<div *ngIf="openingTimeSection" class="blink_on_render div_flex_centering_with_border">
<!--Hour-->
<div class="container_holding_certain_type_of_time">
<div class="small_text_red_color_within_div">
hh
</div>
<div class="time_div_content">
<div *ngFor="let hour of hours" class="loop_content_div" (click)="handleChooseOpeningHour(hour)"
[ngClass]="{'set_background_bg_sky_600': openHourSelected === hour}"
>
{{hour}}
</div>
</div>
</div>
</div>

</div>
</div>
</div>
</div>


Component:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LucideAngularModule, ChevronDown, ChevronUp, X } from 'lucide-angular';

@Component({
selector: 'app-create-operating-times',
imports: [LucideAngularModule, CommonModule],
templateUrl: './create-operating-times.component.html',
styleUrl: './create-operating-times.component.scss'
})
export class CreateOperatingTimesComponent {

//Icons
readonly ChevronDown = ChevronDown;
readonly ChevronUp = ChevronUp;
readonly X = X;

//Loop data for time
readonly hours = Array.from({length: 24}, (_, h) => h.toString().padStart(2, '0'));
readonly minutes = Array.from({length: 60}, (_, m) => m.toString().padStart(2, '0'));

//third form related
thirdForm: boolean = false;
openingTimeSection: boolean = false;
closingTimeSection: boolean = false;
openHourSelected: string = "";


openCloseThirdForm(){
if(!this.thirdForm){
this.thirdForm = true;
this.openingTimeSection = true;
this.closingTimeSection = false;
}else{
this.thirdForm = false;
this.openingTimeSection = false;
this.closingTimeSection = false;
}
}

handleOpeningTimeSection(){
if(!this.openingTimeSection){
this.openingTimeSection = true;
this.closingTimeSection = false;
}else{
this.openingTimeSection = false;
}
}

handleChooseOpeningHour(hour: string){
if(this.openHourSelected === hour){
this.openHourSelected = ""
}else{
this.openHourSelected = hour;
}
}

handleClosingTimeSection(){
if(!this.closingTimeSection){
this.openingTimeSection = false;
this.closingTimeSection = true;
}else{
this.closingTimeSection = false;
}
}
}


SCSS:

html {
touch-action: manipulation;
width: 100%;
}

.container{
max-width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: 0.5rem;
padding-right: 0.5rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

}

.form_outer_div{
border-width: 1px; /* Tailwind's 'border' */
border-radius: 0.375rem; /* Tailwind's 'rounded-md' */
border-color: #1e3a8a; /* Tailwind's 'border-blue-900' */
padding: 0.5rem; /* Tailwind's 'p-2' */
margin: 0; /* Tailwind's 'mb-2' */
display: grid; /* Tailwind's 'grid' */
width: 100%; /* Tailwind's 'w-full' */
border: 2px solid #1e3a8a;;
}

.flex_centering_no_border{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}

.centering_grid_div_content_base_class{
display: grid;
border-radius: 0.375rem;
border: 1px solid #1e40af;
text-align: center;
justify-items: center;
padding: 0.5rem;
}

.centering_grid_div_content_base_class_no_border{
display: grid;
border-radius: 0.375rem;
text-align: center;
justify-items: center;
padding: 0.5rem;
}

.div_flex_centering_with_border{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
border: 2px solid #1e40af; /* border-blue-900 */
border-radius: 0.375rem; /* rounded-md */
padding-top: 0.25rem; /* pt-1 */
padding-bottom: 0.25rem; /* pb-1 */
}

.input_fields, .input_fields:laceholder{
border-width: 1px;
border-style: solid;
border-color: #1e3a8a; /* Tailwind's border-blue-900 */
border-radius: 0.375rem; /* rounded-md */
text-align: center;
margin: 0; /* mb-2 */
caret-color: transparent;
height: 2rem;
}

.small_text_red_color_within_div{
display: flex;
font-weight: bold;
justify-content: center;
color: #ef4444;
font-size: 16px;
}

.small_gray_p{
color: #6b7280; /* Tailwind's gray-500 */
font-size: 1rem; /* Tailwind's text-xs */
font-weight: bold;
}

.gray_p{
font-size: 1.20rem; /* Tailwind's 'text-base' */
color: #6b7280; /* Tailwind's 'text-gray-500' */
font-weight: bold;
}

.icon__wrapper_form{
display: flex;
justify-content: space-between;
}

.icon__styling__form{
margin-bottom: 2px;
padding-top: 0px;
}

::ng-deep .open_close_forms_icons svg {
width: 32px !important;
height: 32px !important;
stroke-width: 3;
stroke: #1e3a8a;
}

.div_what_is_section_about_and_icon{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}

.p_operating_times{
color: #6b7280; /* Equivalent to text-gray-500 in Tailwind */
font-size: 0.75rem; /* Equivalent to text-xs in Tailwind */
}

.container_holding_certain_type_of_time{
@extend .centering_grid_div_content_base_class;
height: 15rem;
border-width: 1px;
border-style: solid;
border-color: #e5e7eb; /* Default border color in Tailwind */
}

.what_is_this_section_about{
color: #3B82F6; /*blue-500*/
margin-bottom: 2px;
font-weight: bold;
font-size: 1.35rem;
}

.time_labeling{
display: flex;
color: #f87171; /* Tailwind's red-500 color */
font-weight: bold;
font-size: 0.875rem; /* 14px */
justify-content: center
}

.loop_content_div{
border-top: 1px solid #3b82f6;
padding: 0.25rem; /* 4px */
border-bottom: 1px solid #3b82f6; /* Tailwind's blue-500 color */
cursor: pointer;
width: 48px;
}

.loop_content_div:hover{
@extend .hover_effect_sky_600;
}

.time_div_content{
-webkit-tap-highlight-color: transparent; /* Hide tap highlight */
touch-action: manipulation; /* Reduce delay on Android */
display: grid;
border-radius: 0.375rem;
border-color: #1e3a8a; /* Tailwind's blue-900 color */
padding: 0.25rem; /* 4px */
height: 100%;
overflow-y: auto;
width: 100%;
/* Mobile interaction helpers */
-webkit-overflow-scrolling: touch;
touch-action: manipulation;
pointer-events: auto;
}

/* xs */
@media (min-width: 475px) {
.container {
max-width: 475px;
}
}

/* sm */
@media (min-width: 640px) {
.container {
max-width: 640px;
}
}

/* md */
@media (min-width: 768px) {
.container {
max-width: 768px;
}
}

/* lg */
@media (min-width: 1024px) {
.container {
max-width: 1024px;
}
}

/* lx */
@media (min-width: 1280px) {
.container {
max-width: 1280px;
}
}

/* 2xl*/
@media (min-width: 1536px) {
.container {
max-width: 1536px;
}
}

//Conditional styling
.set_background_bg_sky_600{
background-color: #0284c7;
}

//Hover effects
.hover_effect_sky_600{
background-color: #0284c7;
}

/* Animations and transition */

@keyframes blinkFade {
0% {
opacity: 0;
}
10%{
opacity: 1;
}
}

.blink_on_render{
animation: blinkFade 0.2s ease-in-out;
}


As i said this is very weird because creating the same exact feature in next.js works just fine in a real phone but the problem i described before happens in angular and remix. When i tested the feature in the browser using mobile size it worked but not in a real phone. Thanks for helping

[url="https://stackoverflow.com/questions/79591785/unselecting-and-other-weird-behaviors-like-tapping-outside-deselect-sometimes-wh"]Continue reading...[/url]