taiga-family / taiga-ui

Playground Link

https://taiga-ui.dev/next/components/textfield#dropdown

Description

Open https://taiga-ui.dev/next/components/textfield#dropdown
Click on the 2nd textfield

Desktop (MacOS):

Mobile device (iPhone 13 mini, ios 17.2.1):

Angular version

16

Taiga UI version

main branch

Which browsers have you used?

Chrome
Firefox
Safari
Edge

Which operating systems have you used?

There's (pointerdown.prevent) that prevents opening on desktop and Android, looks like it's not enough for iOS. Maybe try something like capture.stop on various pointer/mouse/touch/click events to see what helps.

Problem description

The main reason of it – programmatic focus.

taiga-ui/projects/core/components/textfield/select.directive.ts

Line 22 in e0cb9b4

'(pointerdown.prevent)': 'el.focus()',

taiga-ui/projects/core/components/textfield/textfield.template.html

Line 19 in e0cb9b4

(pointerdown.silent.prevent)="input.focus()"

It triggers appearance of native dropdown and this behavior cannot be cancelled!

Reproduction

<select></select>

<button>Focus select!</button>

const select = document.querySelector('select')!;
const button = document.querySelector('button')!;

button.addEventListener('click', () => {
  select.focus();
});

🐞 - New `Textfield` with `<select tuiTextfield />` has incorrect behavior on IOS