CODEWITHSUNDEEP
iostailwind-csssveltesveltekitskeleton-ui
Abhinav PR
Abhinav PR

Reputation: 1

Svelte kit website's drop down button is not work on iOS?

https://github.com/iamAbhinavPR/dotZODE

Website repository in GitHub.

The website is a Binary, hexadecimal, octal and ASCII code converter. On iOS, the two select button is not responding or working on the click, but it is working perfectly on Android and Windows. I haven't tested it in Mac, because I don't own one.

I have tried to change the viewport meta tags, but it isn't solving the problem.

    <div class="mb-10 mt-5"> 
     <!-- First Button --> 
     <button class="btn variant-filled-secondary w-48 justify-between" use:popup={popupCombobox}> 
       <span class="capitalize">{listValue ?? "Select"}</span> 
       <span class="material-symbols-rounded">expand_more</span> 
     </button> 

     <!-- Second Button --> 
     <button class="btn variant-filled-secondary w-48 justify-between" use:popup={popupCombobox2}> 
       <span class="capitalize">{listValue2 ?? "Select"}</span> 
       <span class="material-symbols-rounded">expand_more</span> 
     </button> 

     <!-- First Dropdown List --> 
     <div class="card w-48 shadow-xl py-2" data-popup="popupCombobox"> 
       <ListBox rounded="rounded-none"> 
         <ListBoxItem bind:group={listValue} name="medium" value="ASCII">ASCII</ListBoxItem> 
         <ListBoxItem bind:group={listValue} name="medium" value="Binary">Binary</ListBoxItem> 
         <ListBoxItem bind:group={listValue} name="medium" value="Octal">Octal</ListBoxItem> 
         <ListBoxItem bind:group={listValue} name="medium" value="Hex">Hexadecimal</ListBoxItem> 
       </ListBox> 
     </div> 

     <!-- Second Dropdown List --> 
     <div class="card w-48 shadow-xl py-2" data-popup="popupCombobox2"> 
       <ListBox rounded="rounded-none"> 
         <ListBoxItem bind:group={listValue2} name="medium" value="Octal">Octal</ListBoxItem> 
         <ListBoxItem bind:group={listValue2} name="medium" value="Hex">Hexadecimal</ListBoxItem> 
         <ListBoxItem bind:group={listValue2} name="medium2" value="Binary">Binary</ListBoxItem> 
         <ListBoxItem bind:group={listValue2} name="medium2" value="ASCII">ASCII</ListBoxItem> 
       </ListBox> 
     </div> 

 </div>

Upvotes: 0

Views: 166

Answers (1)

Abhinav PR
Abhinav PR

Reputation: 1

I have fixed it. I change the event from focus-click to click

const popupCombobox: PopupSettings = {
    event: 'click',
    target: 'popupCombobox',
    placement: 'bottom',
    closeQuery: '.listbox-item'
};

Upvotes: 0

Related Questions