From 017a0c1d819c7470f7565d588fd0c3132c37abce Mon Sep 17 00:00:00 2001
From: Barsukov Nikita <nikita.s.barsukov@gmail.com>
Date: Mon, 19 Sep 2022 18:38:37 +0300
Subject: [PATCH] fix(core): `PrimitiveTextfield` drop wrong `text-overflow:
 ellipsis` (horizontal scroll bug)

---
 .../textfield/textfield.style.less            |  5 -----
 projects/core/styles/mixins/textfield.less    |  1 -
 .../cypress/tests/kit/input/input.cy.ts       | 22 +++++++++++++++++--
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/projects/core/components/primitive-textfield/textfield/textfield.style.less b/projects/core/components/primitive-textfield/textfield/textfield.style.less
index fe15a9011903..324778dcd621 100644
--- a/projects/core/components/primitive-textfield/textfield/textfield.style.less
+++ b/projects/core/components/primitive-textfield/textfield/textfield.style.less
@@ -48,11 +48,6 @@
     :host-context(tui-text-area._focused:not(._readonly))::placeholder {
         opacity: 1;
     }
-
-    &::placeholder,
-    &:placeholder-shown {
-        .text-overflow();
-    }
 }
 
 textarea:host {
diff --git a/projects/core/styles/mixins/textfield.less b/projects/core/styles/mixins/textfield.less
index af47c8d56e84..a1101dddcb61 100644
--- a/projects/core/styles/mixins/textfield.less
+++ b/projects/core/styles/mixins/textfield.less
@@ -71,7 +71,6 @@
     overflow: hidden;
     text-transform: inherit;
     resize: none;
-    text-overflow: ellipsis;
 
     :host[data-mode='onDark'] &,
     :host-context(tui-primitive-textfield[data-mode='onDark']),
diff --git a/projects/demo-integrations/cypress/tests/kit/input/input.cy.ts b/projects/demo-integrations/cypress/tests/kit/input/input.cy.ts
index 9c5f0860d4f7..3c184795e8a9 100644
--- a/projects/demo-integrations/cypress/tests/kit/input/input.cy.ts
+++ b/projects/demo-integrations/cypress/tests/kit/input/input.cy.ts
@@ -45,11 +45,10 @@ describe(`Input`, () => {
                 .matchImageSnapshot(`04-custom-normal-icon-content-cleaner-hint`);
         });
 
-        // TODO: fix after adding native input to example
         it(`input overflow due to placeholder`, () => {
             cy.viewport(400, 812);
             cy.tuiVisit(
-                `${INPUT_PAGE_URL}/API?tuiMode=null&icon=tuiIconSearch&iconAlign=left&pseudoFocused=true`,
+                `${INPUT_PAGE_URL}/API?tuiMode=null&icon=tuiIconSearch&iconAlign=left&pseudoFocused=true&attr.placeholder=Lorem%20ipsum%20dolor%20sit%20amet,%20consectetur%20adipiscing%20elit,%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore`,
             );
 
             cy.get(`.t-input-wrapper`)
@@ -94,4 +93,23 @@ describe(`Input`, () => {
             .blur()
             .matchImageSnapshot(`07-very-long-text-without-text-ellipsis`);
     });
+
+    it(`can be horizontally scrolled`, () => {
+        cy.viewport(450, 300).tuiVisit(`components/input/API`);
+
+        cy.get(`#demoContent`).should(`be.visible`).as(`wrapper`);
+        cy.get(`@wrapper`).find(`tui-input input[tuiTextfield]`).as(`input`);
+
+        cy.get(`@input`)
+            .should(`not.have.css`, `text-overflow`, `ellipsis`)
+            .focus()
+            .clear()
+            .type(
+                `You should not set 'text-overflow: ellipsis' for input because it can be horizontally scrolled`,
+            )
+            .blur();
+
+        cy.get(`@input`).scrollTo(`center`, {ensureScrollable: false});
+        cy.get(`@wrapper`).matchImageSnapshot(`08-horizontally-scrolled`);
+    });
 });