Почему не работает?

[omqmo]

Поскольку использую приватный ключ для работы с api, я не могу сделать полностью рабочий пример, но очень надеюсь, что у кого-то хотя бы есть предположения из-за чего мой код не работает. Сам код лишь делает запросы к yandex map за получением адреса и все. Стоит обратить внимание, что api работает на промисах, поэтому для сочленения с rxjs используется конечно же from(), на основе которого создается и тестовый пример (помеченный комментами). Кроме этого, комопнент слушает событие фокуса на tui-dropdown-hosted. Все придельно просто., код ниже, а дальше будет видео.

@Component({
  selector: 'ya-address-input',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule, TuiDataListModule, TuiButtonModule, TuiSvgModule, TuiTextfieldControllerModule, TuiHostedDropdownModule, TuiPrimitiveTextfieldModule, TuiDropdownModule],
  templateUrl: './ya-address-input.component.html',
  styleUrls: ['./ya-address-input.component.scss']
})
export class YaAddressInputComponent {
  isOpen = signal( false );
  value = signal<string>( `` );
  matches = signal<string[]>( [] );

  input$ = new BehaviorSubject<string>( `` );


  constructor(private yaMap: YaApiLoaderService) {
    this.yaMap.load().pipe(
      switchMap<any, any>( ( yamaps: WithSuggest ) => {
        return this.input$.pipe(
          filter( value => value !== `` ),
          debounceTime<any>( 800 ),

          /* ЭТО ЭМИТАЦИЯ РАБОТЫ С API */
          switchMap<any, any>((value: string) => {
            return from(new Promise((resolve, reject)=>{
              setTimeout( () => {
                resolve( [`first`, `second`] );
              }, 1000 );
            }))
          }),

          /* ЭТО РАБОТА С API */
          // switchMap<any, any>( ( value: string ) => {
          //   return from( yamaps.suggest( value ) ).pipe(
          //     map( response => {
          //       return response.map( item => item.value );
          //     } ),
          //   )
          // } )
        )
      } )
    ).subscribe( ( response: any ) => {
      console.log( response )

      this.matches.set( response );
      this.isOpen.set( true );
    } );
  }

  onDropdownToggle ( isToggle: boolean ) {
  }

  onDropdownFocus ( isFocus: boolean ) {
    console.log(`FOCUS`, isFocus)
  }
}

А теперь видео в первом из которых работа тестового примера, а во втором работа непосредственно с api. Обратить внимание стоит на консоль - поведение эдентичное, но в случае с картами dropdown не открывается. Почему? Я думал, что запрос к api как-то уводит фокус, но в подобном случае ведь должен срабатывать обработчик, а он как видно из консоли ничем не удивляет. Буду рад любым мыслям. И стоит упомянуть, что я уже на подсознательном уровне дожидаюсь пару секунд до подключения карт чтобы полностью исключить увод фокуса при их создании (автор подключает их как тег <script>). Просто этого на видео не видно, но по началу я даже вывод в консоль делал, хотя потом уже привык и удалил это из кода. Еще пробовал catchError ловить и просто подписывался на ошибки - их нет.

video-.2.webm

video-.3.webm

[splincode]

ya-address-input.component.html please show me how the template looks like

[omqmo]

<tui-hosted-dropdown [content]="dropdown" [open]="isOpen()" tuiDropdownLimitWidth="fixed" (openChange)="onDropdownToggle($event)" (focusedChange)="onDropdownFocus($event)" class="hosted-dropdown">
  <tui-primitive-textfield [value]="value()" (valueChange)="input$.next($event)">
    <span>Город, улица, дом</span>
  </tui-primitive-textfield>

  <ng-template #dropdown>
    <tui-data-list>
      <button *ngFor="let address of matches()" tuiOption [value]="address">
        {{ address }}
      </button>
    </tui-data-list>
  </ng-template>

</tui-hosted-dropdown>

[omqmo]

ChangeDetectorRef помог, хотя я и не могу объяснить зачем он нужен, ведь OnPush стратегии нет. Может это все-таки баг? Ведь единственное, что может нарушить открытие, это увод фокуса. Ведь других причин просто быть не может. Но курсор мигает, бордер выделен, события ухода нет. Значит это баг.

[splincode]

I think the problem is that you are using angular signals. Most of the Taiga ui examples are based on async pipe. if you add stackblitz with 15 angular and simple of taiga ui dropdown example with angular signals then we can research the problem. Also I recommend you use OnPush everywhere by default (it's best practices).

[omqmo]

Вот тоже самое, но с rxjs, поведение тоже самое.

<tui-hosted-dropdown *tuiLet="matches$ | async as matches" [content]="dropdownTmpl"  tuiDropdownLimitWidth="fixed" [open]="(matches?.length ?? 0) > 0" (openChange)="onDropdownToggle($event)" (focusedChange)="onDropdownFocus($event)" class="hosted-dropdown">
  <tui-primitive-textfield [value]="value()" (valueChange)="input$.next($event)">
    <span>Город, улица, дом</span>
  </tui-primitive-textfield>

  <ng-template #dropdownTmpl>
    <tui-data-list>
      <button *ngFor="let address of matches" tuiOption [value]="address">
        {{ address }}
      </button>
    </tui-data-list>
  </ng-template>

</tui-hosted-dropdown>

@Component({
  selector: 'ya-address-input',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule, TuiDataListModule, TuiButtonModule, TuiSvgModule, TuiTextfieldControllerModule, TuiHostedDropdownModule, TuiPrimitiveTextfieldModule, TuiDropdownModule, TuiActiveZoneModule, TuiFocusableModule, TuiLetModule],
  templateUrl: './ya-address-input.component.html',
  styleUrls: ['./ya-address-input.component.scss']
})
export class YaAddressInputComponent {
  isOpen = signal( false );
  value = signal<string>( `` );
  // matches = signal<string[]>( [] );

  input$ = new BehaviorSubject<string>( `` );

  matches$ = this.yaMap.load().pipe(
    switchMap<any, any>( ( yamaps: WithSuggest ) => {
      return this.input$.pipe(
        filter( value => value !== `` ),
        debounceTime<any>( 800 ),

        /* ЭТО ЭМИТАЦИЯ РАБОТЫ С API */
        // switchMap<any, any>((value: string) => {
        //   return from(new Promise((resolve, reject)=>{
        //     setTimeout( () => {
        //       resolve( [`first`, `second`] );
        //     }, 1000 );
        //   }))
        // }),

        switchMap<any, any>( ( value: string ) => {
          return from( yamaps.suggest( value ) ).pipe(
            map( response => {
              console.log(response)
              return response.map( item => item.value );
            } ),
          )
        } )
      )
    } )
  ) as Observable<string[]>


  constructor(private cdRef: ChangeDetectorRef,
              private yaMap: YaApiLoaderService) {

  }

  onDropdownToggle ( isToggle: boolean ) {
  }

  onDropdownFocus ( isFocus: boolean ) {
    console.log(`FOCUS`, isFocus, document.activeElement)
  }
}

И по поводу OnPush... Если я правильно понимаю, то раньше, и пока еще, ваше утверждение верно. Но появление сигналов ознаминовало закат эры zone.js и OnPush стратегии. По факту, теперь вы должны переписывать ui под signals.