fix(core): PrimitiveTextfield drop wrong text-overflow: ellipsis …

…(horizontal scroll bug) (#2733)
taiga-family · Sep 20, 2022 · 2ddc249 · 2ddc249
1 parent 4b97145
commit 2ddc249
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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`);
+    });
 });