@skbkontur/react-ui 4.15.3 → 4.15.5

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.15.5](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@4.15.4...@skbkontur/react-ui@4.15.5) (2023-08-02)
+
+
+### Bug Fixes
+
+* **InputLikeText:** use debounce to control async content selection ([#3226](https://github.com/skbkontur/retail-ui/issues/3226)) ([18e5947](https://github.com/skbkontur/retail-ui/commit/18e5947086f0a6b161b4fc0d40412a600131337f))
+
+
+
+
+
+## [4.15.4](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@4.15.3...@skbkontur/react-ui@4.15.4) (2023-07-24)
+
+
+### Bug Fixes
+
+* a correct republish of the previous release
+
+
+
+
+
 ## [4.15.3](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@4.15.2...@skbkontur/react-ui@4.15.3) (2023-07-21)
 
 

package/components/DateInput/__stories__/DateInput.stories.tsx

@@ -9,6 +9,7 @@ import { Select } from '../../Select';
 import { DateInput, DateInputProps } from '../DateInput';
 import { LangCodes, LocaleContext } from '../../../lib/locale';
 import { defaultLangCode } from '../../../lib/locale/constants';
+import { InternalDateGetter } from '../../../lib/date/InternalDateGetter';
 
 interface DateInputFormattingState {
   order: InternalDateOrder;
@@ -239,11 +240,21 @@ class DateInputSimple extends React.Component<DateInputSimpleProps> {
 }
 
 class DateInputLastEvent extends React.Component {
+  private getTodayComponents = InternalDateGetter.getTodayComponents;
   public state = {
     lastEvent: 'none',
   };
 
+  public handleFocus = () => {
+    InternalDateGetter.getTodayComponents = () => ({
+      date: 1,
+      month: 1,
+      year: 2000,
+    });
+  };
+
   public handleBlur = () => {
+    InternalDateGetter.getTodayComponents = this.getTodayComponents;
     this.setState({ lastEvent: 'blur' });
   };
 
@@ -254,7 +265,12 @@ class DateInputLastEvent extends React.Component {
   public render() {
     return (
       <Gapped>
-        <DateInputSimple onValueChange={this.handleChange} onBlur={this.handleBlur} defaultValue="21.12.2012" />
+        <DateInputSimple
+          onValueChange={this.handleChange}
+          onBlur={this.handleBlur}
+          onFocus={this.handleFocus}
+          defaultValue="21.12.2012"
+        />
         <div>{this.state.lastEvent}</div>
       </Gapped>
     );
@@ -379,15 +395,6 @@ BlurAlwaysAfterChange.parameters = {
         await this.expect(await this.takeScreenshot()).to.matchImage('value changed');
       },
       async 'value restored'() {
-        await this.browser.executeScript(function () {
-          // @ts-expect-error: `window` object doesn't expose types by default. See: https://github.com/microsoft/TypeScript/issues/19816.
-          window.OldDate = window.Date;
-          // @ts-expect-error: Read the comment above.
-          window.Date = function () {
-            // @ts-expect-error: Read the comment above.
-            return new window.OldDate(2000, 0, 1);
-          };
-        });
         await this.browser.executeScript(function () {
           const input = window.document.querySelector("[data-comp-name~='DateInput']");
           if (input instanceof HTMLElement) {
@@ -402,10 +409,9 @@ BlurAlwaysAfterChange.parameters = {
           .click(this.browser.findElement({ css: 'body' }))
           .perform();
         await this.browser.executeScript(function () {
-          // @ts-expect-error: `window` object doesn't expose types by default. See: https://github.com/microsoft/TypeScript/issues/19816.
-          if (window.OldDate) {
-            // @ts-expect-error: Read the comment above.
-            window.Date = window.OldDate;
+          const input = window.document.querySelector("[data-comp-name~='DateInput']");
+          if (input instanceof HTMLElement) {
+            input.blur();
           }
         });
         await this.expect(await this.takeScreenshot()).to.matchImage('value restored');

package/internal/InputLikeText/InputLikeText.tsx

@@ -2,6 +2,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import React from 'react';
 import ReactDOM from 'react-dom';
+import debounce from 'lodash.debounce';
 
 import { isNonNullable } from '../../lib/utils';
 import { isKeyTab, isShortcutPaste } from '../../lib/events/keyboard/identifiers';
@@ -100,6 +101,9 @@ export class InputLikeText extends React.Component<InputLikeTextProps, InputLike
     return this.node;
   }
 
+  // Async call required for Firefox
+  private selectNodeContentsDebounced = debounce(selectNodeContents, 0);
+
   public selectInnerNode = (node: HTMLElement | null, start = 0, end = 1) => {
     if (this.dragging || !node) {
       return;
@@ -112,7 +116,8 @@ export class InputLikeText extends React.Component<InputLikeTextProps, InputLike
     this.frozenBlur = true;
 
     this.lastSelectedInnerNode = [node, start, end];
-    setTimeout(() => selectNodeContents(node, start, end), 0);
+    this.selectNodeContentsDebounced(node, start, end);
+
     if (this.focusTimeout) {
       clearInterval(this.focusTimeout);
     }
@@ -465,6 +470,7 @@ export class InputLikeText extends React.Component<InputLikeTextProps, InputLike
   };
 
   private handleBlur = (e: React.FocusEvent<HTMLElement>) => {
+    this.selectNodeContentsDebounced.cancel();
     if (isMobile) {
       e.target.removeAttribute('contenteditable');
     }

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@skbkontur/react-ui",
-  "version": "4.15.3",
+  "version": "4.15.5",
   "description": "UI Components",
   "main": "cjs/index.js",
   "module": "index.js",
   "sideEffects": false,
-  "homepage": "https://tech.skbkontur.ru/react-ui/4.15.3/",
+  "homepage": "https://tech.skbkontur.ru/react-ui/4.15.5/",
   "repository": {
     "type": "git",
     "url": "git@github.com:skbkontur/retail-ui.git"