Fix separate dial code padding calc on right for RTL

leandrodaher · Jul 6, 2023 · 501153c · 501153c
1 parent f3327f1
commit 501153c
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 8 deletions.
diff --git a/build/css/intlTelInput.css b/build/css/intlTelInput.css
@@ -149,6 +149,10 @@
 .iti--separate-dial-code.iti--show-flags .iti__selected-dial-code {
  margin-left: 6px;
 }
+[dir=rtl] .iti--separate-dial-code.iti--show-flags .iti__selected-dial-code {
+ margin-left: 0;
+ margin-right: 6px;
+}
 .iti--container {
  position: absolute;
  top: -1000px;

diff --git a/build/css/intlTelInput.min.css b/build/css/intlTelInput.min.css
diff --git a/build/js/intlTelInput-jquery.js b/build/js/intlTelInput-jquery.js
@@ -231,6 +231,8 @@
  this.options.dropdownContainer = document.body;
  }
  }
+ // check if input has one parent with RTL
+ this.isRTL = !!this.telInput.closest("[dir=rtl]");
  // these promises get resolved when their individual requests complete
  // this way the dev can do something like iti.promise.then(...) to know when all requests are
  // complete
@@ -1096,7 +1098,11 @@
  // offsetWidth is zero if input is in a hidden container during initialisation
  var selectedFlagWidth = this.selectedFlag.offsetWidth || this._getHiddenSelectedFlagWidth();
  // add 6px of padding after the grey selected-dial-code box, as this is what we use in the css
- this.telInput.style.paddingLeft = "".concat(selectedFlagWidth + 6, "px");
+ if (this.isRTL) {
+ this.telInput.style.paddingRight = "".concat(selectedFlagWidth + 6, "px");
+ } else {
+ this.telInput.style.paddingLeft = "".concat(selectedFlagWidth + 6, "px");
+ }
  }
  // and the input's placeholder
  this._updatePlaceholder();

diff --git a/build/js/intlTelInput-jquery.min.js b/build/js/intlTelInput-jquery.min.js
diff --git a/build/js/intlTelInput.js b/build/js/intlTelInput.js
@@ -226,6 +226,8 @@
  this.options.dropdownContainer = document.body;
  }
  }
+ // check if input has one parent with RTL
+ this.isRTL = !!this.telInput.closest("[dir=rtl]");
  // these promises get resolved when their individual requests complete
  // this way the dev can do something like iti.promise.then(...) to know when all requests are
  // complete
@@ -1091,7 +1093,11 @@
  // offsetWidth is zero if input is in a hidden container during initialisation
  var selectedFlagWidth = this.selectedFlag.offsetWidth || this._getHiddenSelectedFlagWidth();
  // add 6px of padding after the grey selected-dial-code box, as this is what we use in the css
- this.telInput.style.paddingLeft = "".concat(selectedFlagWidth + 6, "px");
+ if (this.isRTL) {
+ this.telInput.style.paddingRight = "".concat(selectedFlagWidth + 6, "px");
+ } else {
+ this.telInput.style.paddingLeft = "".concat(selectedFlagWidth + 6, "px");
+ }
  }
  // and the input's placeholder
  this._updatePlaceholder();

diff --git a/build/js/intlTelInput.min.js b/build/js/intlTelInput.min.js
diff --git a/src/css/intlTelInput.scss b/src/css/intlTelInput.scss
@@ -259,6 +259,11 @@ $mobilePopupMargin: 30px !default;
  }
  &.iti--show-flags .iti__selected-dial-code {
  margin-left: $arrowPadding;
+
+ [dir="rtl"] & {
+ margin-left: 0;
+ margin-right: $arrowPadding;
+ }
  }
  }
 

diff --git a/src/js/intlTelInput.js b/src/js/intlTelInput.js
@@ -154,6 +154,9 @@ class Iti {
  }
  }
 
+ // check if input has one parent with RTL
+ this.isRTL = !!this.telInput.closest('[dir=rtl]');
+
  // these promises get resolved when their individual requests complete
  // this way the dev can do something like iti.promise.then(...) to know when all requests are
  // complete
@@ -1202,7 +1205,11 @@ class Iti {
  this.selectedFlag.offsetWidth || this._getHiddenSelectedFlagWidth();
 
  // add 6px of padding after the grey selected-dial-code box, as this is what we use in the css
- this.telInput.style.paddingLeft = `${selectedFlagWidth + 6}px`;
+ if (this.isRTL) {
+ this.telInput.style.paddingRight = `${selectedFlagWidth + 6}px`;
+ } else {
+ this.telInput.style.paddingLeft = `${selectedFlagWidth + 6}px`;
+ }
  }
 
  // and the input's placeholder