feat(Textarea): add feature flag textareaUseSafari17Workaround (#3352)

packages/react-ui/components/Textarea/Textarea.tsx

@@ -13,17 +13,23 @@ import { ThemeContext } from '../../lib/theming/ThemeContext';
 import { Theme } from '../../lib/theming/Theme';
 import { RenderLayer } from '../../internal/RenderLayer';
 import { ResizeDetector } from '../../internal/ResizeDetector';
-import { isIE11 } from '../../lib/client';
+import { isIE11, isSafari17 } from '../../lib/client';
 import { CommonProps, CommonWrapper, CommonWrapperRestProps } from '../../internal/CommonWrapper';
 import { isTestEnv } from '../../lib/currentEnvironment';
 import { cx } from '../../lib/theming/Emotion';
 import { rootNode, TSetRootNode } from '../../lib/rootNode';
 import { createPropsGetter } from '../../lib/createPropsGetter';
 import { SizeProp } from '../../lib/types/props';
+import {
+  getFullReactUIFlagsContext,
+  ReactUIFeatureFlags,
+  ReactUIFeatureFlagsContext,
+} from '../../lib/featureFlagsContext';
 
 import { getTextAreaHeight } from './TextareaHelpers';
 import { styles } from './Textarea.styles';
 import { TextareaCounter, TextareaCounterRef } from './TextareaCounter';
+import { TextareaWithSafari17Workaround } from './TextareaWithSafari17Workaround';
 
 /**
  * @deprecated use SizeProp
@@ -204,6 +210,7 @@ export class Textarea extends React.Component<TextareaProps, TextareaState> {
   };
 
   private getProps = createPropsGetter(Textarea.defaultProps);
+  private featureFlags!: ReactUIFeatureFlags;
 
   private getRootSizeClassName() {
     switch (this.getProps().size) {
@@ -295,16 +302,23 @@ export class Textarea extends React.Component<TextareaProps, TextareaState> {
 
   public render() {
     return (
-      <ThemeContext.Consumer>
-        {(theme) => {
-          this.theme = theme;
+      <ReactUIFeatureFlagsContext.Consumer>
+        {(flags) => {
+          this.featureFlags = getFullReactUIFlagsContext(flags);
           return (
-            <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
-              {this.renderMain}
-            </CommonWrapper>
+            <ThemeContext.Consumer>
+              {(theme) => {
+                this.theme = theme;
+                return (
+                  <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
+                    {this.renderMain}
+                  </CommonWrapper>
+                );
+              }}
+            </ThemeContext.Consumer>
           );
         }}
-      </ThemeContext.Consumer>
+      </ReactUIFeatureFlagsContext.Consumer>
     );
   }
 
@@ -436,6 +450,9 @@ export class Textarea extends React.Component<TextareaProps, TextareaState> {
       />
     );
 
+    const Component =
+      this.featureFlags.textareaUseSafari17Workaround && isSafari17 ? TextareaWithSafari17Workaround : 'textarea';
+
     return (
       <RenderLayer
         onFocusOutside={this.handleCloseCounterHelp}
@@ -451,7 +468,7 @@ export class Textarea extends React.Component<TextareaProps, TextareaState> {
         >
           {placeholderPolyfill}
           <ResizeDetector onResize={this.reflowCounter}>
-            <textarea
+            <Component
               {...textareaProps}
               className={textareaClassNames}
               style={textareaStyle}
@@ -465,7 +482,7 @@ export class Textarea extends React.Component<TextareaProps, TextareaState> {
               disabled={disabled}
             >
               {this.props.children}
-            </textarea>
+            </Component>
           </ResizeDetector>
           {fakeTextarea}
           {counter}

packages/react-ui/components/Textarea/TextareaWithSafari17Workaround.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { forwardRefAndName } from '../../lib/forwardRefAndName';
+
+/**
+ * React textarea behaves incorrectly on first rendered in Safari version 17.*
+ * Reproduce: https://codesandbox.io/p/sandbox/textarea-and-textarea-safari-bug-9v95vz
+ */
+export const TextareaWithSafari17Workaround = forwardRefAndName<
+  HTMLTextAreaElement,
+  React.TextareaHTMLAttributes<HTMLTextAreaElement>
+>('TextareaWithSafari17Workaround', (props, ref) => {
+  const [firstRender, setFirstRender] = React.useState(true);
+
+  React.useEffect(() => {
+    firstRender && setFirstRender(false);
+  }, []);
+
+  return <textarea {...props} value={firstRender ? '' : props.value} ref={ref} />;
+});

packages/react-ui/lib/client.ts

@@ -21,3 +21,5 @@ export const isMobile =
   'ontouchstart' in globalObject.document.documentElement;
 
 export const isIOS = /(ip[ao]d|iphone)/gi.test(userAgent);
+
+export const isSafari17 = isSafari && userAgent.includes('version/17');

packages/react-ui/lib/featureFlagsContext/FEATUREFLAGSCONTEXT.md

@@ -41,6 +41,32 @@ const getItems = () => {};
 </ReactUIFeatureFlagsContext.Provider>
 ```
 
+### textareaUseSafari17Workaround
+
+В браузере Safari версии 17.* возник баг в реактовом элементе `<textarea />`. Баг не позволяет нормально вводить текст в пустые строки.
+Но только если эти пустые строки были при монтировании элемента.
+Если пустые строки добавить сразу после монтирования, то проблема не наблюдается.
+
+Мы можем купировать этот баг на своей стороне, но только в рамках контрола `Textarea`.
+Также баг могут поправить на стороне Safari или React, из-за чего уже наше обходное решение может вызвать другой баг.
+Поэтому лучше добавить возможность выключить в любой момент наше обходное решение.
+
+Обходное решение само отслеживает Safari версии 17.*, и применяется только для него.
+
+```jsx harmony
+import { Textarea, ReactUIFeatureFlagsContext } from '@skbkontur/react-ui';
+
+const [value, setValue] = React.useState('1\n\n\n\n2');
+
+<ReactUIFeatureFlagsContext.Provider value={{ textareaUseSafari17Workaround: true }}>
+  <Textarea
+    value={value}
+    onValueChange={setValue}
+    rows={5}
+  />
+</ReactUIFeatureFlagsContext.Provider>
+```
+
 ## Объект со всеми флагами
 
 Чтобы получить объект со всеми флагами, необходимо применить вспомогательную функцию getFullValidationsFlagsContext к объекту заданных флагов:

packages/react-ui/lib/featureFlagsContext/ReactUIFeatureFlagsContext.tsx

@@ -2,10 +2,12 @@ import React from 'react';
 
 export interface ReactUIFeatureFlags {
   tokenInputRemoveWhitespaceFromDefaultDelimiters?: boolean;
+  textareaUseSafari17Workaround?: boolean;
 }
 
 export const reactUIFeatureFlagsDefault: ReactUIFeatureFlags = {
   tokenInputRemoveWhitespaceFromDefaultDelimiters: false,
+  textareaUseSafari17Workaround: false,
 };
 
 export const ReactUIFeatureFlagsContext = React.createContext<ReactUIFeatureFlags>(reactUIFeatureFlagsDefault);