Comments (9)
I just realized that there is actually no bug. I was using the UNIVERSAL_PROVIDERS in both the server side and client side configurations because I changed it in the app.config.ts
file instead of app.config.server.ts
. Of course, it should only be placed on the server side!
@sarvarkhuja did the same mistake in his code.
from taiga-ui.
I've recently begun working with Taiga UI and ng-web-apis, and while I'm still familiarizing myself with these libraries, but I've noticed something strange.
In @ng-web-apis/universal, the UNIVERSAL_ANIMATION_FRAME of UNIVERSAL_PROVIDERS seems to mock ANIMATION_FRAME with NEVER.
import {ValueProvider} from '@angular/core';
import {ANIMATION_FRAME} from '@ng-web-apis/common';
import {NEVER} from 'rxjs';
export const UNIVERSAL_ANIMATION_FRAME: ValueProvider = {
provide: ANIMATION_FRAME,
useValue: NEVER,
};
This works fine for server-side rendering, but it doesn't seem to update when Angular hydrates the components. Shouldn't that be the case?
As a temporary solution, I've created a workaround using isPlatformBrowser:
import { Component, PLATFORM_ID } from '@angular/core';
import { UNIVERSAL_PROVIDERS } from '@ng-web-apis/universal';
import { NEVER, Observable } from 'rxjs';
...
export const NEW_ANIMATION_FRAME: Observable<DOMHighResTimeStamp> =
new Observable<DOMHighResTimeStamp>((subscriber) => {
let id = NaN;
const callback = (timestamp: DOMHighResTimeStamp): void => {
subscriber.next(timestamp);
id = requestAnimationFrame(callback);
};
id = requestAnimationFrame(callback);
return () => {
cancelAnimationFrame(id);
};
});
@Component({
...
providers: [
{ provide: TUI_SANITIZER, useClass: NgDompurifySanitizer },
UNIVERSAL_PROVIDERS,
{
provide: ANIMATION_FRAME,
useFactory: (platformId: Object) =>
isPlatformBrowser(platformId) ? NEW_ANIMATION_FRAME : NEVER,
deps: [PLATFORM_ID],
}
]
While this workaround allows me to see the dropdowns, I'm still encountering a height issue. But I'm hopeful that this information will aid in finding a more robust solution.
I'm unsure if this is the best place to report this issue. Should I also post it on the ng-web-apis repo?
from taiga-ui.
Thank you for investigation. It should change to the real animation frame after CSR kicks in. Seems like something has changed in more recent Angular versions with hydration. We will take a look. No need to post in other repo as it would still be us to dig in and fix it :)
from taiga-ui.
I think we should first address the issue with the tokens not properly switching to the client side, it will most likely fix everything.
from taiga-ui.
I'm not sure what issue you're describing. Sure you cannot open the dropdown in server side as it's impossible to calculate its position. Or do you mean that it is not opening after the client side kicks in? Could you provide a small reproduction?
from taiga-ui.
I've encountered the same issue where the dropdown doesn't function as expected after the client-side rendering kicks in.
Here's a minimal reproduction path to replicate the issue:
- Create a new Angular app (v17) with Server Side Rendering (SSR).
- Add Taiga UI to your project using the command ng add taiga-ui.
- Add @ng-web-apis/universal to your project and follow the instructions provided here.
- In your app component, add a select component as shown below:
<tui-root>
<main class="main">
<div class="content">
<form class="b-form">
<tui-select tuiTextfieldSize="s" [formControl]="testValue">
Character
<input placeholder="Choose your hero" tuiTextfield />
<tui-data-list-wrapper
*tuiDataList
[items]="items"
></tui-data-list-wrapper>
</tui-select>
<tui-select [formControl]="testValue">
Character
<select tuiSelect [items]="items"></select>
</tui-select>
</form>
</div>
</main>
<router-outlet />
</tui-root>
import { NgDompurifySanitizer } from '@tinkoff/ng-dompurify';
import {
TuiRootModule,
TuiDialogModule,
TuiAlertModule,
TUI_SANITIZER,
TuiDataListModule,
} from '@taiga-ui/core';
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { TuiDataListWrapperModule, TuiSelectModule } from '@taiga-ui/kit';
@Component({
selector: 'app-root',
standalone: true,
imports: [
RouterOutlet,
TuiRootModule,
TuiDialogModule,
TuiAlertModule,
FormsModule,
ReactiveFormsModule,
TuiSelectModule,
TuiDataListModule,
TuiDataListWrapperModule,
],
templateUrl: './app.component.html',
styleUrl: './app.component.scss',
providers: [{ provide: TUI_SANITIZER, useClass: NgDompurifySanitizer }],
})
export class AppComponent {
items = [
'Luke Skywalker',
'Leia Organa Solo',
'Darth Vader',
'Han Solo',
'Obi-Wan Kenobi',
'Yoda',
];
testValue = new FormControl();
}
As a result, the dropdown doesn't work as expected. In a standard app, the tui-dropdown
gets the correct attributes :
However, with SSR, the tui-dropdown
doesn't have any attributes except for width and is set to visibility: hidden
because it's missing top attribute.
from taiga-ui.
taiga.zip
here is source file to reproduce
from taiga-ui.
Thank you.
FYI, I've encountered issues with several other components and directives when using Angular 17 in conjunction with SSR. I suspect these issues might be related, which is why I've chosen not to create separate issue threads for each one.
Here's a list of the elements that are not functioning as expected:
- Tabs: The underline feature is not working properly
- tuiTextfieldCleaner: Clicking on the cross icon does not produce any effect
- TuiLanguageSwitcher: I'm unable to inject it, which seems to be related to an issue with localStorage
Please inform me if it would be helpful for me to update this list with new elements as I discover them.
from taiga-ui.
Good to know, thanks :)
from taiga-ui.
Related Issues (20)
- 🐞 - DropdownSelection(Textarea), ошибка при использовании
- 🐞 - TUI Editor | Mention. Ошибка: Failed to execute 'elementFromPoint' on 'Document': The provided double value is non-finite. HOT 1
- 🐞 - TUI | Table | Не корректное поведение при ресайзе колонок
- 🐞 - Form field validation state is not updated after calling `form.markAllAsTouched()` HOT 5
- 🐞 - tui-select with native select cannot select the first item in the list
- 🐞 - Inconsistent item size inside Group directive
- 🐞 - Scroll and zoom on preview
- 🐞 - TUI | Select - В Safari скролл сбрасывается при выборе элемента из Native Select
- 🐞 - Different styles between light and dark themes for radio-block groups
- 🐞 - `TuiMultiSelectModule` does not export `TuiTextfieldDirective` HOT 4
- 🐞 - `Sensitive` is not compatible with textfields
- tui-input-number with [step] directive doesn't work correct in table🐞 -
- 🐞 - dragging is broken for global scrollbar
- 🐞 - TuiClickOutside directive unexpected behaviour HOT 1
- 🐞 - TuiError produce an error with PolymorpheusComponent HOT 7
- 🐞 - Дропдауны и тултипы не скрываются, если хост пропал из дома
- 🐞 - Additional click required in InputDateRange for same day period
- 🐞 - Safari - Компонент input-inline - При редактировании длинной строки заголовка фокус всегда остается на начале строки
- 🐞 - The carousel scrolls through the elements until there is only one visible when you use the laptop's touchpad.
- 🚀 - Revisit webkit/moz specific selectors in core/mixins HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from taiga-ui.