vmware-clarity/ng-clarity

'Range Input' doesn't work inside 'clr-modal'

stoychevl opened this issue · 5 comments

stoychevl commented

Describe the bug

When trying to use the Clarity Range input inside Angular component clr-modal I get an exception in the console and the modal does not open.

How to reproduce

Using the following code:

<clr-modal [clrModalSize]="'lg'" [(clrModalOpen)]="open" (close)="cancel()"> <div class="modal-title"> Title </div> <div class="modal-body"> <form clrForm> <clr-range-container [clrRangeHasProgress]="true"> <label>Full example</label> <input type="range" clrRange [(ngModel)]="slider" name="three" /> <clr-control-helper>Helper text</clr-control-helper> </clr-range-container> </form> </div> <div class="modal-footer"> </div> </clr-modal>

Steps to reproduce the behavior:

  1. Create a clarity modal using an Angular component 'clr-modal'
  2. Place a range input inside the modal using clarity example with 'clr-range-container'
  3. Open the modal
  4. See error in the console

bundle.js:129538 ERROR Error: The selector "[clrRange]#clr-form-control-2" did not match any elements at NoneEncapsulationDomRenderer.selectRootElement (bundle.js:158018:13) at BaseAnimationRenderer.selectRootElement (bundle.js:157014:26) at ClrRangeContainer.getRangeProgressFillWidth (bundle.js:189288:33) at ClrRangeContainer_span_5_Template (bundle.js:174924:79) at executeTemplate (bundle.js:131510:5) at refreshView (bundle.js:131394:7) at refreshEmbeddedViews (bundle.js:132363:9) at refreshView (bundle.js:131417:5) at refreshComponent (bundle.js:132408:7) at refreshChildComponents (bundle.js:131192:5)

Expected behavior

The modal should open and should contain a Range input element

Versions

Clarity version:
I've manage to reproduce this bug in versions as early as v3.x

  • v13.x
  • v15.x
  • Other:

Framework version:
Angular 15

Device:

  • Type: MacBook
  • OS: iOS
  • Browser: chrome
  • Version [115.0.5790.114 (Official Build) (x86_64)]
kevinbuhmann commented

I believe I fixed this already in #861 which was released in v15.9.0. Please test with the latest version.

stoychevl commented

Hi @kevinbuhmann, I am not sure if the fix for the accordion, as I can read in the title "This change prevents the following error when the range input is in an accordion:" is also fixing the issue with the clr-modal.

I have just tested with 15.9.0 and can still reproduce the issue, however I am testing in an environment with plugins and mixed Clarity versions, so in order to be 100% sure, I will try to create a StakBlitz example.

pawaru commented

This Stackblitz confirms the issue is fixed in v15.9.0

CC: @kevinbuhmann

kevinbuhmann commented

Thanks for the confirmation!

  • 👍1
github-actions commented

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.