From 3c3348b2f30c69cd6771f82bef07151c751ef25b Mon Sep 17 00:00:00 2001 From: Aram Limpens Date: Wed, 29 May 2024 11:38:51 +0200 Subject: [PATCH] fix: Fix issues with inputs on iOS --- packages/css/src/common/hide-input.scss | 2 +- packages/css/src/components/date-input/date-input.scss | 5 ++--- packages/css/src/components/file-input/file-input.scss | 3 ++- packages/css/src/components/search-field/search-field.scss | 5 ++--- packages/css/src/components/select/select.scss | 2 +- packages/css/src/components/text-area/text-area.scss | 5 ++++- packages/css/src/components/text-input/text-input.scss | 5 ++++- packages/css/src/components/time-input/time-input.scss | 5 ++--- 8 files changed, 18 insertions(+), 14 deletions(-) diff --git a/packages/css/src/common/hide-input.scss b/packages/css/src/common/hide-input.scss index ad0a2525dc..3bffc3da23 100644 --- a/packages/css/src/common/hide-input.scss +++ b/packages/css/src/common/hide-input.scss @@ -7,5 +7,5 @@ appearance: none; margin-block: 0; margin-inline: 0; - opacity: 0%; /* to hide native input field in older iOS */ + width: 0; // Make sure the input doesn’t take up space on iOS } diff --git a/packages/css/src/components/date-input/date-input.scss b/packages/css/src/components/date-input/date-input.scss index 88522d76f0..616c67dc90 100644 --- a/packages/css/src/components/date-input/date-input.scss +++ b/packages/css/src/components/date-input/date-input.scss @@ -6,9 +6,8 @@ @import "../../common/text-rendering"; @mixin reset { - // Reset native appearance, this causes issues on iOS and Android devices - -webkit-appearance: none; - appearance: none; + -webkit-appearance: none; // Reset appearance for Safari < 15.4 + appearance: none; // Reset native appearance, this causes issues on iOS and Android devices border: 0; border-radius: 0; // Reset rounded borders on iOS devices box-sizing: border-box; diff --git a/packages/css/src/components/file-input/file-input.scss b/packages/css/src/components/file-input/file-input.scss index 0a8942825b..77bad81d63 100644 --- a/packages/css/src/components/file-input/file-input.scss +++ b/packages/css/src/components/file-input/file-input.scss @@ -35,7 +35,8 @@ } .ams-file-input::file-selector-button { - appearance: none; // Reset default appearance on iOS devices + -webkit-appearance: none; // Reset appearance for Safari < 15.4 + appearance: none; // Reset native appearance, this causes issues on iOS and Android devices background-color: var(--ams-file-input-file-selector-button-background-color); box-shadow: var(--ams-file-input-file-selector-button-box-shadow); color: var(--ams-file-input-file-selector-button-color); diff --git a/packages/css/src/components/search-field/search-field.scss b/packages/css/src/components/search-field/search-field.scss index 8757fc4985..336ee55a5f 100644 --- a/packages/css/src/components/search-field/search-field.scss +++ b/packages/css/src/components/search-field/search-field.scss @@ -11,9 +11,8 @@ } @mixin reset-input { - // Reset native appearance, this causes issues on iOS and Android devices - -webkit-appearance: none; - appearance: none; + -webkit-appearance: none; // Reset appearance for Safari < 15.4 + appearance: none; // Reset native appearance, this causes issues on iOS and Android devices border: 0; border-radius: 0; // Reset rounded borders on iOS devices box-sizing: border-box; diff --git a/packages/css/src/components/select/select.scss b/packages/css/src/components/select/select.scss index f8de4f618b..664dba0838 100644 --- a/packages/css/src/components/select/select.scss +++ b/packages/css/src/components/select/select.scss @@ -4,7 +4,7 @@ */ @mixin reset { - appearance: none; + appearance: none; // Reset native appearance to hide default chevron border: 0; border-radius: 0; // Reset rounded borders for Safari on MacOS } diff --git a/packages/css/src/components/text-area/text-area.scss b/packages/css/src/components/text-area/text-area.scss index 3a0256e515..bf00f316d5 100644 --- a/packages/css/src/components/text-area/text-area.scss +++ b/packages/css/src/components/text-area/text-area.scss @@ -6,13 +6,16 @@ @import "../../common/text-rendering"; @mixin reset { + -webkit-appearance: none; // Reset appearance for Safari < 15.4 + appearance: none; // Reset native appearance, this causes issues on iOS and Android devices + border: 0; + border-radius: 0; // Reset rounded borders on iOS devices box-sizing: border-box; margin-block: 0; } .ams-text-area { background-color: var(--ams-text-area-background-color); - border: 0; box-shadow: var(--ams-text-area-box-shadow); color: var(--ams-text-area-color); font-family: var(--ams-text-area-font-family); diff --git a/packages/css/src/components/text-input/text-input.scss b/packages/css/src/components/text-input/text-input.scss index 4d09106fae..909f4f2160 100644 --- a/packages/css/src/components/text-input/text-input.scss +++ b/packages/css/src/components/text-input/text-input.scss @@ -6,13 +6,16 @@ @import "../../common/text-rendering"; @mixin reset { + -webkit-appearance: none; // Reset appearance for Safari < 15.4 + appearance: none; // Reset native appearance, this causes issues on iOS and Android devices + border: 0; + border-radius: 0; // Reset rounded borders on iOS devices box-sizing: border-box; margin-block: 0; } .ams-text-input { background-color: var(--ams-text-input-background-color); - border: 0; box-shadow: var(--ams-text-input-box-shadow); color: var(--ams-text-input-color); font-family: var(--ams-text-input-font-family); diff --git a/packages/css/src/components/time-input/time-input.scss b/packages/css/src/components/time-input/time-input.scss index fc721ca6bf..d27ae0cad4 100644 --- a/packages/css/src/components/time-input/time-input.scss +++ b/packages/css/src/components/time-input/time-input.scss @@ -6,9 +6,8 @@ @import "../../common/text-rendering"; @mixin reset { - // Reset native appearance, this causes issues on iOS and Android devices - -webkit-appearance: none; - appearance: none; + -webkit-appearance: none; // Reset appearance for Safari < 15.4 + appearance: none; // Reset native appearance, this causes issues on iOS and Android devices border: 0; border-radius: 0; // Reset rounded borders on iOS devices box-sizing: border-box;