search

infor-design / enterprise-wc

Enterprise-grade web component library for the Infor Design System
Apache License 2.0
27 stars 26 forks source link

IdsColorPicker: scrolls into view on page load in Angular #2502

Closed radovaniljic closed 2 months ago

radovaniljic commented 3 months ago

Describe the bug In Angular apps, if the IdsContainer does NOT have the hidden attribute, IdsColorPicker is scrolled into view when the page is loaded.

To Reproduce Steps to reproduce the behavior:

  1. Run the Web Components with Angular project (https://github.com/infor-design/enterprise-wc-examples/tree/main/angular-ids-wc)
  2. Go to src/app/components/ids-color-picker/demos/example/example.component.html
  3. Remove hidden from ids-container
  4. Add the following code between <ids-theme-switcher> and the first <ids-layout-grid>: 
    <ids-layout-grid>
<ids-layout-grid-cell height="5000px">Hello</ids-layout-grid-cell>
</ids-layout-grid>
  5. Navigate to http://localhost:4200/ids-color-picker/example
  6. Notice that the colors pickers are scrolled into view

Expected behavior They shouldn't be scrolled into view

Version

Platform

tmcconechy commented 3 months ago

The ids-container hidden is helping with the Flash of unstyled content but i wanted to try another way https://github.com/infor-design/enterprise-wc/issues/2357

I think the color picker is updating in a weird way because of angular. We will check this out

anhallbe commented 3 months ago

It looks like the color picker always steals focus when it is added to the DOM (connectedCallback -> #configureSwatches), if I read this line correctly:

https://github.com/infor-design/enterprise-wc/blob/8071eda7b07cdd7b6445c22ec86a2651db3be833/src/components/ids-color-picker/ids-color-picker.ts#L677