carbon-react 119.9.0 → 119.9.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@ Carbon is a [React](https://facebook.github.io/react/) component library develop
|
|
|
4
4
|
|
|
5
5
|
## Getting started
|
|
6
6
|
|
|
7
|
-
Our [getting started guide](
|
|
7
|
+
Our [getting started guide](https://carbon.sage.com/?path=/story/getting-started-installation--page) provides instructions on how to install and use the Carbon library.
|
|
8
8
|
|
|
9
9
|
## Examples
|
|
10
10
|
|
|
@@ -92,9 +92,18 @@ const Textarea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
92
92
|
const expandTextarea = () => {
|
|
93
93
|
const textarea = internalRef.current;
|
|
94
94
|
if (textarea?.scrollHeight && textarea?.scrollHeight > minHeight.current) {
|
|
95
|
+
// need to reset scroll position of the nearest parent which scrolls
|
|
96
|
+
let scrollElement = textarea;
|
|
97
|
+
while (scrollElement && !scrollElement?.scrollTop) {
|
|
98
|
+
scrollElement = scrollElement?.parentElement || null;
|
|
99
|
+
}
|
|
100
|
+
const scrollPosition = scrollElement?.scrollTop;
|
|
95
101
|
textarea.style.height = "0px";
|
|
96
102
|
// Set the height so all content is shown
|
|
97
103
|
textarea.style.height = `${Math.max(textarea.scrollHeight, minHeight.current)}px`;
|
|
104
|
+
if (scrollElement && scrollPosition) {
|
|
105
|
+
scrollElement.scrollTop = scrollPosition;
|
|
106
|
+
}
|
|
98
107
|
}
|
|
99
108
|
};
|
|
100
109
|
const {
|
|
@@ -126,10 +135,14 @@ const Textarea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
126
135
|
if (expandable) {
|
|
127
136
|
window.addEventListener("resize", expandTextarea);
|
|
128
137
|
minHeight.current = internalRef?.current?.clientHeight || 0;
|
|
138
|
+
// need to also run expandTextarea when the Sage UI font completes loading, to prevent strange scroll
|
|
139
|
+
// behaviour when it only loads after the component is rendered
|
|
140
|
+
document.fonts?.addEventListener("loadingdone", expandTextarea);
|
|
129
141
|
}
|
|
130
142
|
return () => {
|
|
131
143
|
if (expandable) {
|
|
132
144
|
window.removeEventListener("resize", expandTextarea);
|
|
145
|
+
document.fonts?.removeEventListener("loadingdone", expandTextarea);
|
|
133
146
|
}
|
|
134
147
|
};
|
|
135
148
|
}, [expandable]);
|
|
@@ -101,9 +101,18 @@ const Textarea = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
|
|
|
101
101
|
const expandTextarea = () => {
|
|
102
102
|
const textarea = internalRef.current;
|
|
103
103
|
if (textarea?.scrollHeight && textarea?.scrollHeight > minHeight.current) {
|
|
104
|
+
// need to reset scroll position of the nearest parent which scrolls
|
|
105
|
+
let scrollElement = textarea;
|
|
106
|
+
while (scrollElement && !scrollElement?.scrollTop) {
|
|
107
|
+
scrollElement = scrollElement?.parentElement || null;
|
|
108
|
+
}
|
|
109
|
+
const scrollPosition = scrollElement?.scrollTop;
|
|
104
110
|
textarea.style.height = "0px";
|
|
105
111
|
// Set the height so all content is shown
|
|
106
112
|
textarea.style.height = `${Math.max(textarea.scrollHeight, minHeight.current)}px`;
|
|
113
|
+
if (scrollElement && scrollPosition) {
|
|
114
|
+
scrollElement.scrollTop = scrollPosition;
|
|
115
|
+
}
|
|
107
116
|
}
|
|
108
117
|
};
|
|
109
118
|
const {
|
|
@@ -135,10 +144,14 @@ const Textarea = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
|
|
|
135
144
|
if (expandable) {
|
|
136
145
|
window.addEventListener("resize", expandTextarea);
|
|
137
146
|
minHeight.current = internalRef?.current?.clientHeight || 0;
|
|
147
|
+
// need to also run expandTextarea when the Sage UI font completes loading, to prevent strange scroll
|
|
148
|
+
// behaviour when it only loads after the component is rendered
|
|
149
|
+
document.fonts?.addEventListener("loadingdone", expandTextarea);
|
|
138
150
|
}
|
|
139
151
|
return () => {
|
|
140
152
|
if (expandable) {
|
|
141
153
|
window.removeEventListener("resize", expandTextarea);
|
|
154
|
+
document.fonts?.removeEventListener("loadingdone", expandTextarea);
|
|
142
155
|
}
|
|
143
156
|
};
|
|
144
157
|
}, [expandable]);
|