A Character Limit indicator appears for all fields within a dynamic p…

…anel (#8990) * resolve for #8958 A Character Limit indicator appears for all fields within a dynamic panel * resolve for #8958 A Character Limit indicator appears for all fields within a dynamic panel * work for #8958 A Character Limit indicator appears for all fields within a dynamic panel --------- Co-authored-by: OlgaLarina <[email protected]>
surveyjs · Oct 30, 2024 · 8b43371 · 8b43371
1 parent 93f5e01
commit 8b43371
Show file tree

Hide file tree

Showing 14 changed files with 42 additions and 37 deletions.
diff --git a/packages/survey-core/src/defaultCss/defaultV2Css.ts b/packages/survey-core/src/defaultCss/defaultV2Css.ts
@@ -548,7 +548,7 @@ export var defaultV2Css = {
     actionsCellDrag: "sd-table__cell--drag",
     emptyCell: "sd-table__cell--empty",
     verticalCell: "sd-table__cell--vertical",
-    cellQuestionWrapper: "sd-table__question-wrapper",
+    cellQuestionWrapper: "sd-matrix__question-wrapper sd-table__question-wrapper",
     compact: "sd-element--with-frame sd-element--compact"
   },
   matrixdynamic: {
@@ -604,7 +604,7 @@ export var defaultV2Css = {
     draggedRow: "sv-matrixdynamic-dragged-row",
     emptyCell: "sd-table__cell--empty",
     verticalCell: "sd-table__cell--vertical",
-    cellQuestionWrapper: "sd-table__question-wrapper",
+    cellQuestionWrapper: "sd-matrix__question-wrapper sd-table__question-wrapper",
     errorsCell: "sd-table__cell--error",
     errorsCellTop: "sd-table__cell--error-top",
     errorsCellBottom: "sd-table__cell--error-bottom",

diff --git a/packages/survey-core/src/defaultV2-theme/blocks/sd-input.scss b/packages/survey-core/src/defaultV2-theme/blocks/sd-input.scss
@@ -124,8 +124,13 @@ textarea {
   inset-block-end: calcSize(1.5);
 }
 
-.sd-question__content:focus-within .sd-remaining-character-counter {
-  display: flex;
+.sd-text__content,
+.sd-comment__content,
+.sd-multipletext__content,
+.sd-matrix__question-wrapper {
+  &:focus-within .sd-remaining-character-counter {
+    display: flex;
+  }
 }
 
 @mixin runnable-track {

diff --git a/packages/survey-core/src/defaultV2-theme/blocks/sd-table.scss b/packages/survey-core/src/defaultV2-theme/blocks/sd-table.scss
@@ -364,7 +364,7 @@
   padding: calcSize(1.5) calcSize(1);
 }
 
-.sd-matrixdynamic__content .sd-table__question-wrapper {
+.sd-matrix__question-wrapper {
   position: relative;
 }
 

diff --git a/tests/markup/snapshots/matrixdropdown-cell-errors-bottom.snap.html b/tests/markup/snapshots/matrixdropdown-cell-errors-bottom.snap.html
@@ -17,7 +17,7 @@
 					<span class="sv-string-viewer">row1</span>
 				</td>
 				<td class="sd-question--error sd-table__cell" colspan="1" title="col1">
-					<div class="sd-table__question-wrapper">
+					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
 						<input aria-errormessage="testid0row0cell1_errors" aria-invalid="true" aria-label="row row1, column col1" aria-required="true" autocomplete="" class="sd-input sd-input--error sd-text" id="testid0row0cell1i" placeholder="" type="text">
 					</div>
 				</td>

diff --git a/tests/markup/snapshots/matrixdropdown-cell-errors-top.snap.html b/tests/markup/snapshots/matrixdropdown-cell-errors-top.snap.html
@@ -32,7 +32,7 @@
 					<span class="sv-string-viewer">row1</span>
 				</td>
 				<td class="sd-question--error sd-table__cell" colspan="1" title="col1">
-					<div class="sd-table__question-wrapper">
+					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
 						<input aria-errormessage="testid0row1cell1_errors" aria-invalid="true" aria-label="row row1, column col1" aria-required="true" autocomplete="" class="sd-input sd-input--error sd-text" id="testid0row1cell1i" placeholder="" type="text">
 					</div>
 				</td>

diff --git a/tests/markup/snapshots/matrixdropdown-disabled.snap.html b/tests/markup/snapshots/matrixdropdown-disabled.snap.html
@@ -20,12 +20,12 @@
 					<span class="sv-string-editor" contenteditable="true">Row 1</span>
 				</td>
 				<td class="sd-table__cell" colspan="1" title="">
-					<div class="sd-table__question-wrapper">
+					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
 						<input aria-invalid="false" aria-label="row Row 1, column " aria-required="false" autocomplete="" class="sd-input sd-text" disabled="" id="testid0row1cell1i" placeholder="" type="text">
 					</div>
 				</td>
 				<td class="sd-table__cell" colspan="1" title="">
-					<div class="sd-table__question-wrapper">
+					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
 						<input aria-invalid="false" aria-label="row Row 1, column " aria-required="false" autocomplete="" class="sd-input sd-text" disabled="" id="testid0row1cell2i" placeholder="" type="text">
 					</div>
 				</td>
@@ -35,12 +35,12 @@
 					<span class="sv-string-editor" contenteditable="true">Row 2</span>
 				</td>
 				<td class="sd-table__cell" colspan="1" title="">
-					<div class="sd-table__question-wrapper">
+					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
 						<input aria-invalid="false" aria-label="row Row 2, column " aria-required="false" autocomplete="" class="sd-input sd-text" disabled="" id="testid0row3cell1i" placeholder="" type="text">
 					</div>
 				</td>
 				<td class="sd-table__cell" colspan="1" title="">
-					<div class="sd-table__question-wrapper">
+					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
 						<input aria-invalid="false" aria-label="row Row 2, column " aria-required="false" autocomplete="" class="sd-input sd-text" disabled="" id="testid0row3cell2i" placeholder="" type="text">
 					</div>
 				</td>

diff --git a/tests/markup/snapshots/matrixdropdown-hidden-question-mobile.snap.html b/tests/markup/snapshots/matrixdropdown-hidden-question-mobile.snap.html
@@ -23,7 +23,7 @@
 					<span class="sd-table__responsive-title">
 						<span class="sv-string-viewer sv-string-viewer--multiline">col1</span>
 					</span>
-					<div class="sd-table__question-wrapper">
+					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
 						<input aria-invalid="false" aria-label="row row1, column col1" aria-required="false" autocomplete="" class="sd-input sd-text" id="testid0row0cell2i" placeholder="" type="text">
 					</div>
 				</td>
@@ -33,7 +33,7 @@
 					<span class="sd-table__responsive-title">
 						<span class="sv-string-viewer sv-string-viewer--multiline">col1</span>
 					</span>
-					<div class="sd-table__question-wrapper">
+					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
 						<input aria-invalid="false" aria-label="row row1, column col1" aria-required="false" autocomplete="" class="sd-input sd-text" id="testid0row0cell4i" placeholder="" type="text">
 					</div>
 				</td>
@@ -48,7 +48,7 @@
 					<span class="sd-table__responsive-title">
 						<span class="sv-string-viewer sv-string-viewer--multiline">col1</span>
 					</span>
-					<div class="sd-table__question-wrapper">
+					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
 						<input aria-invalid="false" aria-label="row row2, column col1" aria-required="false" autocomplete="" class="sd-input sd-text" id="testid0row1cell2i" placeholder="" type="text">
 					</div>
 				</td>

diff --git a/tests/markup/snapshots/matrixdropdown-readonly.snap.html b/tests/markup/snapshots/matrixdropdown-readonly.snap.html
@@ -20,12 +20,12 @@
 					<span class="sv-string-viewer">Row 1</span>
 				</td>
 				<td class="sd-table__cell" colspan="1" title="">
-					<div class="sd-table__question-wrapper">
+					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
 						<input aria-invalid="false" aria-label="row Row 1, column " aria-required="false" autocomplete="" class="sd-input sd-input--readonly sd-text" id="testid0row1cell1i" placeholder="" readonly="" type="text">
 					</div>
 				</td>
 				<td class="sd-table__cell" colspan="1" title="">
-					<div class="sd-table__question-wrapper">
+					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
 						<input aria-invalid="false" aria-label="row Row 1, column " aria-required="false" autocomplete="" class="sd-input sd-input--readonly sd-text" id="testid0row1cell2i" placeholder="" readonly="" type="text">
 					</div>
 				</td>
@@ -35,12 +35,12 @@
 					<span class="sv-string-viewer">Row 2</span>
 				</td>
 				<td class="sd-table__cell" colspan="1" title="">
-					<div class="sd-table__question-wrapper">
+					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
 						<input aria-invalid="false" aria-label="row Row 2, column " aria-required="false" autocomplete="" class="sd-input sd-input--readonly sd-text" id="testid0row3cell1i" placeholder="" readonly="" type="text">
 					</div>
 				</td>
 				<td class="sd-table__cell" colspan="1" title="">
-					<div class="sd-table__question-wrapper">
+					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
 						<input aria-invalid="false" aria-label="row Row 2, column " aria-required="false" autocomplete="" class="sd-input sd-input--readonly sd-text" id="testid0row3cell2i" placeholder="" readonly="" type="text">
 					</div>
 				</td>

diff --git a/tests/markup/snapshots/matrixdropdown-vertical.snap.html b/tests/markup/snapshots/matrixdropdown-vertical.snap.html
@@ -19,12 +19,12 @@
 					</span>
 				</td>
 				<td class="sd-table__cell" colspan="1" title="">
-					<div class="sd-table__question-wrapper">
+					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
 						<input aria-invalid="false" aria-label="row Row 1, column " aria-required="false" autocomplete="" class="sd-input sd-text" id="testid0row1cell1i" placeholder="" type="text">
 					</div>
 				</td>
 				<td class="sd-table__cell" colspan="1" title="">
-					<div class="sd-table__question-wrapper">
+					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
 						<input aria-invalid="false" aria-label="row Row 2, column " aria-required="false" autocomplete="" class="sd-input sd-text" id="testid0row1cell2i" placeholder="" type="text">
 					</div>
 				</td>
@@ -35,12 +35,12 @@
 					</span>
 				</td>
 				<td class="sd-table__cell" colspan="1" title="">
-					<div class="sd-table__question-wrapper">
+					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
 						<input aria-invalid="false" aria-label="row Row 1, column " aria-required="false" autocomplete="" class="sd-input sd-text" id="testid0row3cell1i" placeholder="" type="text">
 					</div>
 				</td>
 				<td class="sd-table__cell" colspan="1" title="">
-					<div class="sd-table__question-wrapper">
+					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
 						<input aria-invalid="false" aria-label="row Row 2, column " aria-required="false" autocomplete="" class="sd-input sd-text" id="testid0row3cell2i" placeholder="" type="text">
 					</div>
 				</td>

diff --git a/tests/markup/snapshots/matrixdropdown.snap.html b/tests/markup/snapshots/matrixdropdown.snap.html
@@ -20,12 +20,12 @@
 					<span class="sv-string-viewer">Row 1</span>
 				</td>
 				<td class="sd-table__cell" colspan="1" title="">
-					<div class="sd-table__question-wrapper">
+					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
 						<input aria-invalid="false" aria-label="row Row 1, column " aria-required="false" autocomplete="" class="sd-input sd-text" id="testid0row1cell1i" placeholder="" type="text">
 					</div>
 				</td>
 				<td class="sd-table__cell" colspan="1" title="">
-					<div class="sd-table__question-wrapper">
+					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
 						<input aria-invalid="false" aria-label="row Row 1, column " aria-required="false" autocomplete="" class="sd-input sd-text" id="testid0row1cell2i" placeholder="" type="text">
 					</div>
 				</td>
@@ -35,12 +35,12 @@
 					<span class="sv-string-viewer">Row 2</span>
 				</td>
 				<td class="sd-table__cell" colspan="1" title="">
-					<div class="sd-table__question-wrapper">
+					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
 						<input aria-invalid="false" aria-label="row Row 2, column " aria-required="false" autocomplete="" class="sd-input sd-text" id="testid0row3cell1i" placeholder="" type="text">
 					</div>
 				</td>
 				<td class="sd-table__cell" colspan="1" title="">
-					<div class="sd-table__question-wrapper">
+					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
 						<input aria-invalid="false" aria-label="row Row 2, column " aria-required="false" autocomplete="" class="sd-input sd-text" id="testid0row3cell2i" placeholder="" type="text">
 					</div>
 				</td>

diff --git a/tests/markup/snapshots/matrixdynamic-defaultV2.snap.html b/tests/markup/snapshots/matrixdynamic-defaultV2.snap.html
@@ -19,7 +19,7 @@
 			<tbody>
 				<tr class="sd-table__row sd-table__row--has-end-actions" data-sv-drop-target-matrix-row="testid0row1">
 					<td class="sd-table__cell" colspan="1" title="Column 1">
-						<div class="sd-table__question-wrapper">
+						<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
 							<div class="sd-selectbase">
 								<div class="sv-dropdown_select-wrapper">
 									<div aria-controls="testid0row1cell0i_list" aria-expanded="false" aria-invalid="false" aria-label="row 1, column Column 1" aria-required="false" class="sd-dropdown sd-dropdown--empty sd-input" id="testid0row1cell0i" role="combobox">
@@ -62,7 +62,7 @@
 						</div>
 					</td>
 					<td class="sd-table__cell" colspan="1" title="Column 2">
-						<div class="sd-table__question-wrapper">
+						<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
 							<div class="sd-selectbase">
 								<div class="sv-dropdown_select-wrapper">
 									<div aria-controls="testid0row1cell1i_list" aria-expanded="false" aria-invalid="false" aria-label="row 1, column Column 2" aria-required="false" class="sd-dropdown sd-dropdown--empty sd-input" id="testid0row1cell1i" role="combobox">
@@ -105,7 +105,7 @@
 						</div>
 					</td>
 					<td class="sd-table__cell" colspan="1" title="Column 3">
-						<div class="sd-table__question-wrapper">
+						<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
 							<div class="sd-selectbase">
 								<div class="sv-dropdown_select-wrapper">
 									<div aria-controls="testid0row1cell2i_list" aria-expanded="false" aria-invalid="false" aria-label="row 1, column Column 3" aria-required="false" class="sd-dropdown sd-dropdown--empty sd-input" id="testid0row1cell2i" role="combobox">
@@ -165,7 +165,7 @@
 				</tr>
 				<tr class="sd-table__row sd-table__row--has-end-actions" data-sv-drop-target-matrix-row="testid0row3">
 					<td class="sd-table__cell" colspan="1" title="Column 1">
-						<div class="sd-table__question-wrapper">
+						<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
 							<div class="sd-selectbase">
 								<div class="sv-dropdown_select-wrapper">
 									<div aria-controls="testid0row3cell0i_list" aria-expanded="false" aria-invalid="false" aria-label="row 2, column Column 1" aria-required="false" class="sd-dropdown sd-dropdown--empty sd-input" id="testid0row3cell0i" role="combobox">
@@ -208,7 +208,7 @@
 						</div>
 					</td>
 					<td class="sd-table__cell" colspan="1" title="Column 2">
-						<div class="sd-table__question-wrapper">
+						<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
 							<div class="sd-selectbase">
 								<div class="sv-dropdown_select-wrapper">
 									<div aria-controls="testid0row3cell1i_list" aria-expanded="false" aria-invalid="false" aria-label="row 2, column Column 2" aria-required="false" class="sd-dropdown sd-dropdown--empty sd-input" id="testid0row3cell1i" role="combobox">
@@ -251,7 +251,7 @@
 						</div>
 					</td>
 					<td class="sd-table__cell" colspan="1" title="Column 3">
-						<div class="sd-table__question-wrapper">
+						<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
 							<div class="sd-selectbase">
 								<div class="sv-dropdown_select-wrapper">
 									<div aria-controls="testid0row3cell2i_list" aria-expanded="false" aria-invalid="false" aria-label="row 2, column Column 3" aria-required="false" class="sd-dropdown sd-dropdown--empty sd-input" id="testid0row3cell2i" role="combobox">

diff --git a/tests/markup/snapshots/matrixdynamic-show-in-multiple-columns-mobile.snap.html b/tests/markup/snapshots/matrixdynamic-show-in-multiple-columns-mobile.snap.html
@@ -27,7 +27,7 @@
 					<span class="sd-table__responsive-title">
 						<span class="sv-string-viewer sv-string-viewer--multiline">col1</span>
 					</span>
-					<div class="sd-table__question-wrapper">
+					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
 						<fieldset aria-invalid="false" aria-label="row row1, column col1" aria-required="true" class="sd-selectbase sd-selectbase--mobile sd-selectbase--row" role="radiogroup">
 							<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
 								<label class="sd-selectbase__label">
@@ -48,7 +48,7 @@
 					<span class="sd-table__responsive-title">
 						<span class="sv-string-viewer sv-string-viewer--multiline">col2</span>
 					</span>
-					<div class="sd-table__question-wrapper">
+					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
 						<fieldset aria-invalid="false" aria-label="row row1, column col2" class="sd-selectbase sd-selectbase--mobile sd-selectbase--row" role="group">
 							<legend class="sv-hidden">row row1, column col2</legend>
 							<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">

diff --git a/tests/markup/snapshots/matrixdynamic-show-in-multiple-columns.snap.html b/tests/markup/snapshots/matrixdynamic-show-in-multiple-columns.snap.html
@@ -21,7 +21,7 @@
 					<span class="sv-string-viewer">row1</span>
 				</td>
 				<td class="sd-table__cell sd-table__cell--item" colspan="1" title="Item 1">
-					<div class="sd-table__question-wrapper">
+					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
 						<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
 							<label class="sd-selectbase__label">
 								<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0row1cell1i_0" name="col1_testid0row1cell1" type="radio" value="Item 1">
@@ -32,7 +32,7 @@
 					</div>
 				</td>
 				<td class="sd-table__cell sd-table__cell--item" colspan="1" title="Item 1">
-					<div class="sd-table__question-wrapper">
+					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
 						<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
 							<label class="sd-selectbase__label">
 								<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0row1cell3i_0" name="col2Item 1" required="" type="checkbox" value="Item 1">
@@ -47,7 +47,7 @@
 					</div>
 				</td>
 				<td class="sd-table__cell sd-table__cell--item" colspan="1" title="Item 2">
-					<div class="sd-table__question-wrapper">
+					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
 						<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
 							<label class="sd-selectbase__label">
 								<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0row1cell3i_1" name="col2Item 2" required="" type="checkbox" value="Item 2">

diff --git a/.../tests/defaultV2/etalons/question-matrixdynamic-remaining-character-counter.png b/.../tests/defaultV2/etalons/question-matrixdynamic-remaining-character-counter.png