Color picker breaking with prime-flex

[Ronkiro]

Describe the bug

I noticed it throws some violations when clicking it

The log from chrome

``` zone.js:1292 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952 customScheduleGlobal @ zone.js:1292 scheduleTask @ zone.js:388 onScheduleTask @ core.mjs:6709 scheduleTask @ zone.js:382 onScheduleTask @ zone.js:271 scheduleTask @ zone.js:382 scheduleTask @ zone.js:205 scheduleEventTask @ zone.js:231 (anônimo) @ zone.js:1499 addEventListener @ platform-browser.mjs:846 addEventListener @ platform-browser.mjs:208 listen @ platform-browser.mjs:727 listen @ browser.mjs:4340 listenerInternal @ core.mjs:25746 ɵɵlistener @ core.mjs:25629 ColorPicker_div_3_Template @ primeng-colorpicker.mjs:84 executeTemplate @ core.mjs:11788 renderView @ core.mjs:12950 createAndRenderEmbeddedLView @ core.mjs:13017 createEmbeddedViewImpl @ core.mjs:13943 createEmbeddedView @ core.mjs:16596 _updateView @ common.mjs:3790 set ngIf @ common.mjs:3764 applyValueToInputField @ core.mjs:3914 writeToDirectiveInput @ core.mjs:11627 setInputsForProperty @ core.mjs:12872 elementPropertyInternal @ core.mjs:12193 ɵɵproperty @ core.mjs:21737 ColorPicker_Template @ primeng-colorpicker.mjs:837 executeTemplate @ core.mjs:11788 refreshView @ core.mjs:13341 detectChangesInView @ core.mjs:13549 detectChangesInViewIfAttached @ core.mjs:13511 detectChangesInComponent @ core.mjs:13500 detectChangesInChildComponents @ core.mjs:13561 refreshView @ core.mjs:13393 detectChangesInView @ core.mjs:13549 detectChangesInViewIfAttached @ core.mjs:13511 detectChangesInComponent @ core.mjs:13500 detectChangesInChildComponents @ core.mjs:13561 refreshView @ core.mjs:13393 detectChangesInView @ core.mjs:13549 detectChangesInViewIfAttached @ core.mjs:13511 detectChangesInEmbeddedViews @ core.mjs:13471 refreshView @ core.mjs:13368 detectChangesInView @ core.mjs:13549 detectChangesInViewIfAttached @ core.mjs:13511 detectChangesInComponent @ core.mjs:13500 detectChangesInChildComponents @ core.mjs:13561 refreshView @ core.mjs:13393 detectChangesInView @ core.mjs:13549 detectChangesInViewIfAttached @ core.mjs:13511 detectChangesInEmbeddedViews @ core.mjs:13471 refreshView @ core.mjs:13368 detectChangesInView @ core.mjs:13549 detectChangesInViewIfAttached @ core.mjs:13511 detectChangesInComponent @ core.mjs:13500 detectChangesInChildComponents @ core.mjs:13561 refreshView @ core.mjs:13393 detectChangesInView @ core.mjs:13549 detectChangesInViewIfAttached @ core.mjs:13511 detectChangesInComponent @ core.mjs:13500 detectChangesInChildComponents @ core.mjs:13561 refreshView @ core.mjs:13393 detectChangesInView @ core.mjs:13549 detectChangesInViewIfAttached @ core.mjs:13511 detectChangesInEmbeddedViews @ core.mjs:13471 refreshView @ core.mjs:13368 detectChangesInView @ core.mjs:13549 detectChangesInViewIfAttached @ core.mjs:13511 detectChangesInComponent @ core.mjs:13500 detectChangesInChildComponents @ core.mjs:13561 refreshView @ core.mjs:13393 detectChangesInView @ core.mjs:13549 detectChangesInViewWhileDirty @ core.mjs:13260 detectChangesInternal @ core.mjs:13241 detectChangesInViewIfRequired @ core.mjs:32109 synchronizeOnce @ core.mjs:31915 synchronize @ core.mjs:31886 _tick @ core.mjs:31855 tick @ core.mjs:31844 (anônimo) @ core.mjs:32289 invoke @ zone.js:369 onInvoke @ core.mjs:7045 invoke @ zone.js:368 run @ zone.js:111 run @ core.mjs:6897 next @ core.mjs:32288 ConsumerObserver2.next @ Subscriber.js:90 Subscriber2._next @ Subscriber.js:59 Subscriber2.next @ Subscriber.js:32 (anônimo) @ Subject.js:41 errorContext @ errorContext.js:23 Subject2.next @ Subject.js:31 emit @ core.mjs:6587 checkStable @ core.mjs:6964 (anônimo) @ core.mjs:7000 (anônimo) @ core.mjs:6685 timer @ zone.js:1809 invokeTask @ zone.js:402 runTask @ zone.js:159 invokeTask @ zone.js:483 ZoneTask.invoke @ zone.js:472 data.args. @ zone.js:1778 zone.js:1292 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952 customScheduleGlobal @ zone.js:1292 scheduleTask @ zone.js:388 onScheduleTask @ core.mjs:6709 scheduleTask @ zone.js:382 onScheduleTask @ zone.js:271 scheduleTask @ zone.js:382 scheduleTask @ zone.js:205 scheduleEventTask @ zone.js:231 (anônimo) @ zone.js:1499 addEventListener @ platform-browser.mjs:846 addEventListener @ platform-browser.mjs:208 listen @ platform-browser.mjs:727 listen @ browser.mjs:4340 listenerInternal @ core.mjs:25746 ɵɵlistener @ core.mjs:25629 ColorPicker_div_3_Template @ primeng-colorpicker.mjs:88 executeTemplate @ core.mjs:11788 renderView @ core.mjs:12950 createAndRenderEmbeddedLView @ core.mjs:13017 createEmbeddedViewImpl @ core.mjs:13943 createEmbeddedView @ core.mjs:16596 _updateView @ common.mjs:3790 set ngIf @ common.mjs:3764 applyValueToInputField @ core.mjs:3914 writeToDirectiveInput @ core.mjs:11627 setInputsForProperty @ core.mjs:12872 elementPropertyInternal @ core.mjs:12193 ɵɵproperty @ core.mjs:21737 ColorPicker_Template @ primeng-colorpicker.mjs:837 executeTemplate @ core.mjs:11788 refreshView @ core.mjs:13341 detectChangesInView @ core.mjs:13549 detectChangesInViewIfAttached @ core.mjs:13511 detectChangesInComponent @ core.mjs:13500 detectChangesInChildComponents @ core.mjs:13561 refreshView @ core.mjs:13393 detectChangesInView @ core.mjs:13549 detectChangesInViewIfAttached @ core.mjs:13511 detectChangesInComponent @ core.mjs:13500 detectChangesInChildComponents @ core.mjs:13561 refreshView @ core.mjs:13393 detectChangesInView @ core.mjs:13549 detectChangesInViewIfAttached @ core.mjs:13511 detectChangesInEmbeddedViews @ core.mjs:13471 refreshView @ core.mjs:13368 detectChangesInView @ core.mjs:13549 detectChangesInViewIfAttached @ core.mjs:13511 detectChangesInComponent @ core.mjs:13500 detectChangesInChildComponents @ core.mjs:13561 refreshView @ core.mjs:13393 detectChangesInView @ core.mjs:13549 detectChangesInViewIfAttached @ core.mjs:13511 detectChangesInEmbeddedViews @ core.mjs:13471 refreshView @ core.mjs:13368 detectChangesInView @ core.mjs:13549 detectChangesInViewIfAttached @ core.mjs:13511 detectChangesInComponent @ core.mjs:13500 detectChangesInChildComponents @ core.mjs:13561 refreshView @ core.mjs:13393 detectChangesInView @ core.mjs:13549 detectChangesInViewIfAttached @ core.mjs:13511 detectChangesInComponent @ core.mjs:13500 detectChangesInChildComponents @ core.mjs:13561 refreshView @ core.mjs:13393 detectChangesInView @ core.mjs:13549 detectChangesInViewIfAttached @ core.mjs:13511 detectChangesInEmbeddedViews @ core.mjs:13471 refreshView @ core.mjs:13368 detectChangesInView @ core.mjs:13549 detectChangesInViewIfAttached @ core.mjs:13511 detectChangesInComponent @ core.mjs:13500 detectChangesInChildComponents @ core.mjs:13561 refreshView @ core.mjs:13393 detectChangesInView @ core.mjs:13549 detectChangesInViewWhileDirty @ core.mjs:13260 detectChangesInternal @ core.mjs:13241 detectChangesInViewIfRequired @ core.mjs:32109 synchronizeOnce @ core.mjs:31915 synchronize @ core.mjs:31886 _tick @ core.mjs:31855 tick @ core.mjs:31844 (anônimo) @ core.mjs:32289 invoke @ zone.js:369 onInvoke @ core.mjs:7045 invoke @ zone.js:368 run @ zone.js:111 run @ core.mjs:6897 next @ core.mjs:32288 ConsumerObserver2.next @ Subscriber.js:90 Subscriber2._next @ Subscriber.js:59 Subscriber2.next @ Subscriber.js:32 (anônimo) @ Subject.js:41 errorContext @ errorContext.js:23 Subject2.next @ Subject.js:31 emit @ core.mjs:6587 checkStable @ core.mjs:6964 (anônimo) @ core.mjs:7000 (anônimo) @ core.mjs:6685 timer @ zone.js:1809 invokeTask @ zone.js:402 runTask @ zone.js:159 invokeTask @ zone.js:483 ZoneTask.invoke @ zone.js:472 data.args. @ zone.js:1778 zone.js:1292 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952 customScheduleGlobal @ zone.js:1292 scheduleTask @ zone.js:388 onScheduleTask @ core.mjs:6709 scheduleTask @ zone.js:382 onScheduleTask @ zone.js:271 scheduleTask @ zone.js:382 scheduleTask @ zone.js:205 scheduleEventTask @ zone.js:231 (anônimo) @ zone.js:1499 addEventListener @ platform-browser.mjs:846 addEventListener @ platform-browser.mjs:208 listen @ platform-browser.mjs:727 listen @ browser.mjs:4340 listenerInternal @ core.mjs:25746 ɵɵlistener @ core.mjs:25629 ColorPicker_div_3_Template @ primeng-colorpicker.mjs:109 executeTemplate @ core.mjs:11788 renderView @ core.mjs:12950 createAndRenderEmbeddedLView @ core.mjs:13017 createEmbeddedViewImpl @ core.mjs:13943 createEmbeddedView @ core.mjs:16596 _updateView @ common.mjs:3790 set ngIf @ common.mjs:3764 applyValueToInputField @ core.mjs:3914 writeToDirectiveInput @ core.mjs:11627 setInputsForProperty @ core.mjs:12872 elementPropertyInternal @ core.mjs:12193 ɵɵproperty @ core.mjs:21737 ColorPicker_Template @ primeng-colorpicker.mjs:837 executeTemplate @ core.mjs:11788 refreshView @ core.mjs:13341 detectChangesInView @ core.mjs:13549 detectChangesInViewIfAttached @ core.mjs:13511 detectChangesInComponent @ core.mjs:13500 detectChangesInChildComponents @ core.mjs:13561 refreshView @ core.mjs:13393 detectChangesInView @ core.mjs:13549 detectChangesInViewIfAttached @ core.mjs:13511 detectChangesInComponent @ core.mjs:13500 detectChangesInChildComponents @ core.mjs:13561 refreshView @ core.mjs:13393 detectChangesInView @ core.mjs:13549 detectChangesInViewIfAttached @ core.mjs:13511 detectChangesInEmbeddedViews @ core.mjs:13471 refreshView @ core.mjs:13368 detectChangesInView @ core.mjs:13549 detectChangesInViewIfAttached @ core.mjs:13511 detectChangesInComponent @ core.mjs:13500 detectChangesInChildComponents @ core.mjs:13561 refreshView @ core.mjs:13393 detectChangesInView @ core.mjs:13549 detectChangesInViewIfAttached @ core.mjs:13511 detectChangesInEmbeddedViews @ core.mjs:13471 refreshView @ core.mjs:13368 detectChangesInView @ core.mjs:13549 detectChangesInViewIfAttached @ core.mjs:13511 detectChangesInComponent @ core.mjs:13500 detectChangesInChildComponents @ core.mjs:13561 refreshView @ core.mjs:13393 detectChangesInView @ core.mjs:13549 detectChangesInViewIfAttached @ core.mjs:13511 detectChangesInComponent @ core.mjs:13500 detectChangesInChildComponents @ core.mjs:13561 refreshView @ core.mjs:13393 detectChangesInView @ core.mjs:13549 detectChangesInViewIfAttached @ core.mjs:13511 detectChangesInEmbeddedViews @ core.mjs:13471 refreshView @ core.mjs:13368 detectChangesInView @ core.mjs:13549 detectChangesInViewIfAttached @ core.mjs:13511 detectChangesInComponent @ core.mjs:13500 detectChangesInChildComponents @ core.mjs:13561 refreshView @ core.mjs:13393 detectChangesInView @ core.mjs:13549 detectChangesInViewWhileDirty @ core.mjs:13260 detectChangesInternal @ core.mjs:13241 detectChangesInViewIfRequired @ core.mjs:32109 synchronizeOnce @ core.mjs:31915 synchronize @ core.mjs:31886 _tick @ core.mjs:31855 tick @ core.mjs:31844 (anônimo) @ core.mjs:32289 invoke @ zone.js:369 onInvoke @ core.mjs:7045 invoke @ zone.js:368 run @ zone.js:111 run @ core.mjs:6897 next @ core.mjs:32288 ConsumerObserver2.next @ Subscriber.js:90 Subscriber2._next @ Subscriber.js:59 Subscriber2.next @ Subscriber.js:32 (anônimo) @ Subject.js:41 errorContext @ errorContext.js:23 Subject2.next @ Subject.js:31 emit @ core.mjs:6587 checkStable @ core.mjs:6964 (anônimo) @ core.mjs:7000 (anônimo) @ core.mjs:6685 timer @ zone.js:1809 invokeTask @ zone.js:402 runTask @ zone.js:159 invokeTask @ zone.js:483 ZoneTask.invoke @ zone.js:472 data.args. @ zone.js:1778 zone.js:1292 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952 ```

Environment

Chrome v131.0.6778.86 (Versão oficial) 64 bits

Running locally in standalone components with those imports:

import { ColorPickerModule } from 'primeng/colorpicker';
...
  imports: [DropdownModule, FormsModule, ColorPickerModule, InputTextModule],
...

Code is (using prime-flex):

<div class="flex gap-2 w-full my-2">
    <label for="article-size">Cor primária da fonte</label>
    <input pInputText [(ngModel)]="fontColor" placeholder="#FFFFFF" />
    <div>
      <p-colorPicker name="fontColor" [(ngModel)]="fontColor" appendTo="body" />
    </div>
  </div>

Reproducer

No response

Angular version

18.2.8

PrimeNG version

17.18.11

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

v22.9.0

Browser(s)

Chrome v131.0.6778.86 (Versão oficial) 64 bits

Steps to reproduce the behavior

Just implement it following the docs

Expected behavior

It should render correctly

[Ronkiro]

Sorry for the bad formatting of the log, i just am not managing to format it lol

[Ronkiro]

#16449
sounds related

[mertsincan]

#16449