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)
- π - Use `(resize)` event plugin instead of observer
- π - `dropdown` (TuiDropdownMobile) does not collapse by clicking on the arrow
- π€ - flaky e2e-test avatar
- π - TuiLineChart too small line, when coordinates have 0 value by Y HOT 1
- π - `Input` has broken keyboard navigation (`>=4.0.0` only) HOT 2
- π - region select in InputPhoneInternational size S is displayed wrong
- π - Provider for speed adjustment of animations HOT 3
- π - `DropdownOpen` + `DropdownHover` issues
- π - button loader on safari
- π - `Accordion` throws error if `[tuiAccordionItemContent]` includes `FormGroup`
- π€ - remaining migrations
- π - Unexpected scrollbar behavior in Safari
- π - Update documentation about `PdfViewer`
- π - Problem with placeholder in tui-input size S
- π - tui-input-time sets the correct value but doesn't Preselect Current value from the dropdown HOT 1
- π - Click on one checkbox makes checked another one
- π - `Textfield` supports custom handler for cleaner
- π - TuiDialogComponent async closeable
- π - tui-loader triggers sidebar's activeZoneChange
- π - Placeholder in multiselect disappears while hovering options if the search is empty
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.