'Range Input' doesn't work inside 'clr-modal'
stoychevl opened this issue · comments
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:
- Create a clarity modal using an Angular component 'clr-modal'
- Place a range input inside the modal using clarity example with 'clr-range-container'
- Open the modal
- 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)]
I believe I fixed this already in #861 which was released in v15.9.0. Please test with the latest version.
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.
This Stackblitz confirms the issue is fixed in v15.9.0
CC: @kevinbuhmann
Thanks for the confirmation!
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.