Skip to content

Commit 23ad742

Browse files
OEvgenyOEvgeny
committed
Fix scroll in Chrome
1 parent 7d92982 commit 23ad742

6 files changed

Lines changed: 14 additions & 27 deletions

File tree

‎__tests__/__image_snapshots__/html/transcript-navigation-page-up-down-js-fluent-theme-applied-performs-transcript-navigation-7-snap.png‎

-16.7 KB
Loading

‎__tests__/html/fluentTheme/transcript.navigation.pageUpDown.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@
6969
await pageConditions.scrollStabilized();
7070
await host.snapshot();
7171

72-
// Should page up because the send box is no longer empty
72+
// Should page up because the send box is now empty
7373
await host.sendKeys('BACK_SPACE', 'PAGE_UP');
7474
await pageConditions.scrollStabilized();
7575
await host.snapshot();

‎__tests__/html2/fluentTheme/completion.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@
2020
<body>
2121
<main id="webchat"></main>
2222
<script type="text/babel">
23-
run = fn => fn();
2423
run(async function () {
2524
const {
2625
React,

‎packages/fluent-theme/src/components/sendBox/SendBox.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@
8585
font-size: 14px;
8686
line-height: 20px;
8787
outline: none;
88-
padding: 4px 4px 0;
88+
margin: var(--webchat-spacingVerticalXS) var(--webchat-spacingHorizontalXS) var(--webchat-spacingVerticalNone);
8989
resize: none;
9090

9191
/* Prevent zoom on focus on iOS */

‎packages/fluent-theme/src/components/sendBox/TextArea.module.css‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
display: grid;
33
grid-template-areas: 'main';
44
max-height: 200px;
5-
overflow: hidden;
5+
overflow: auto;
6+
scrollbar-gutter: stable;
67
}
78

89
:global(.webchat-fluent) .sendbox__text-area--hidden {
@@ -34,23 +35,25 @@
3435
outline: inherit;
3536
overflow-wrap: anywhere;
3637
resize: inherit;
37-
scrollbar-gutter: stable;
3838
}
3939

4040
:global(.webchat-fluent) .sendbox__text-area-doppelganger {
41-
overflow: hidden;
41+
overflow: visible;
42+
pointer-events: none;
43+
user-select: none;
4244
visibility: hidden;
4345
white-space: pre-wrap;
4446
}
4547

4648
:global(.webchat-fluent) .sendbox__text-area-input {
4749
background-color: inherit;
4850
color: currentColor;
49-
height: 100%;
51+
contain: size;
52+
overflow: hidden;
5053
padding: 0;
5154
}
5255

53-
:global(.webchat-fluent) .sendbox__text-area-input--scroll {
56+
:global(.webchat-fluent) .sendbox__text-area--scroll {
5457
/* Edge uses -webkit-scrollbar if scrollbar-* is not set */
5558
scrollbar-color: unset;
5659
scrollbar-width: unset;

‎packages/fluent-theme/src/components/sendBox/TextArea.tsx‎

Lines changed: 4 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -67,41 +67,26 @@ const TextArea = forwardRef<
6767
<div
6868
className={cx(
6969
classNames['sendbox__text-area'],
70+
classNames['sendbox__text-area--scroll'],
7071
{ [classNames['sendbox__text-area--hidden']]: props.hidden },
7172
{ [classNames['sendbox__text-area--in-completion']]: props.completion },
7273
props.className
7374
)}
7475
role={props.hidden ? 'hidden' : undefined}
7576
>
7677
{uiState === 'blueprint' ? (
77-
<div
78-
className={cx(
79-
classNames['sendbox__text-area-doppelganger'],
80-
classNames['sendbox__text-area-input--scroll'],
81-
classNames['sendbox__text-area-shared']
82-
)}
83-
>
78+
<div className={cx(classNames['sendbox__text-area-doppelganger'], classNames['sendbox__text-area-shared'])}>
8479
{' '}
8580
</div>
8681
) : (
8782
<Fragment>
88-
<div
89-
className={cx(
90-
classNames['sendbox__text-area-doppelganger'],
91-
classNames['sendbox__text-area-input--scroll'],
92-
classNames['sendbox__text-area-shared']
93-
)}
94-
>
83+
<div className={cx(classNames['sendbox__text-area-doppelganger'], classNames['sendbox__text-area-shared'])}>
9584
{props.completion ? props.completion : props.value || props.placeholder}{' '}
9685
</div>
9786
<textarea
9887
aria-disabled={disabled}
9988
aria-label={props['aria-label']}
100-
className={cx(
101-
classNames['sendbox__text-area-input'],
102-
classNames['sendbox__text-area-input--scroll'],
103-
classNames['sendbox__text-area-shared']
104-
)}
89+
className={cx(classNames['sendbox__text-area-input'], classNames['sendbox__text-area-shared'])}
10590
data-testid={props['data-testid']}
10691
onCompositionEnd={handleCompositionEnd}
10792
onCompositionStart={handleCompositionStart}

0 commit comments

Comments
 (0)