fix: fix #input-password IE11/Edge clear button

dnbexperience · Nov 30, 2020 · 75119dd · 75119dd
1 parent 54baea8
commit 75119dd
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 0 deletions.
diff --git a/...ges/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap b/...ges/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap
@@ -2144,6 +2144,9 @@ legend.dnb-form-label {
   .dnb-input--password .dnb-input__input {
     margin-right: 2.5rem;
     padding-right: 0; }
+    .dnb-input--password .dnb-input__placeholder::-ms-clear,
+    .dnb-input--password .dnb-input__input::-ms-clear {
+      display: none; }
   .dnb-input--password .dnb-input__placeholder {
     padding-right: 4rem; }
   .dnb-input__row {

diff --git a/...s/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap b/...s/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
@@ -787,6 +787,9 @@ legend.dnb-form-label {
   .dnb-input--password .dnb-input__input {
     margin-right: 2.5rem;
     padding-right: 0; }
+    .dnb-input--password .dnb-input__placeholder::-ms-clear,
+    .dnb-input--password .dnb-input__input::-ms-clear {
+      display: none; }
   .dnb-input--password .dnb-input__placeholder {
     padding-right: 4rem; }
   .dnb-input__row {

diff --git a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap b/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap
@@ -1426,6 +1426,9 @@ legend.dnb-form-label {
   .dnb-input--password .dnb-input__input {
     margin-right: 2.5rem;
     padding-right: 0; }
+    .dnb-input--password .dnb-input__placeholder::-ms-clear,
+    .dnb-input--password .dnb-input__input::-ms-clear {
+      display: none; }
   .dnb-input--password .dnb-input__placeholder {
     padding-right: 4rem; }
   .dnb-input__row {

diff --git a/packages/dnb-ui-lib/src/components/input/style/_input.scss b/packages/dnb-ui-lib/src/components/input/style/_input.scss
@@ -140,6 +140,10 @@
   &--password &__input {
     margin-right: 2.5rem;
     padding-right: 0;
+
+    &::-ms-clear {
+      display: none;
+    }
   }
   &--password &__placeholder {
     padding-right: 4rem;

diff --git a/packages/dnb-ui-lib/stories/components/Input.js b/packages/dnb-ui-lib/stories/components/Input.js
@@ -16,6 +16,7 @@ import {
   FormRow,
   FormLabel
 } from '../../src/components'
+import InputPassword from '../../src/components/input/InputPassword'
 
 export default {
   title: 'Eufemia/Components/Input'
@@ -292,6 +293,21 @@ export const InputSandbox = () => {
             />
           </form>
         </Box>
+        <Box>
+          <InputPassword
+            label="Label:"
+            placeholder="A palceholder text"
+            on_change={({ value }) => {
+              console.log('on_change:', value)
+            }}
+            on_show_password={() => {
+              console.log('on_show_password')
+            }}
+            on_hide_password={() => {
+              console.log('on_hide_password')
+            }}
+          />
+        </Box>
       </Wrapper>
     </CustomStyle>
   )