@ajuarezso/sui-design-system 0.15.1 → 0.15.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -9777,6 +9777,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
9777
9777
|
* selector de país es una feature nueva (selector de país); SUI tiene
|
|
9778
9778
|
* [prefix] como string estático.
|
|
9779
9779
|
*/
|
|
9780
|
+
/**
|
|
9781
|
+
* ¿El tap va a parar a algo que abre el teclado?
|
|
9782
|
+
*
|
|
9783
|
+
* Se mira hacia arriba desde el target y no solo el target: en un `sui-input`
|
|
9784
|
+
* el toque suele caer en el wrapper, el label o el ícono, y ninguno de esos es
|
|
9785
|
+
* el `<input>`. Sin subir por los ancestros, tocar el borde de otro campo se
|
|
9786
|
+
* leía como tocar el vacío.
|
|
9787
|
+
*
|
|
9788
|
+
* `readonly` no cuenta —no abre teclado— pero un `disabled` tampoco recibe el
|
|
9789
|
+
* evento, así que no hace falta filtrarlo.
|
|
9790
|
+
*/
|
|
9791
|
+
function recibeTexto(target) {
|
|
9792
|
+
let el = target instanceof HTMLElement
|
|
9793
|
+
? target
|
|
9794
|
+
: target.parentElement;
|
|
9795
|
+
while (el) {
|
|
9796
|
+
const tag = el.tagName;
|
|
9797
|
+
if (tag === 'TEXTAREA' || tag === 'SELECT')
|
|
9798
|
+
return true;
|
|
9799
|
+
if (tag === 'INPUT' && !el.readOnly)
|
|
9800
|
+
return true;
|
|
9801
|
+
if (el.isContentEditable)
|
|
9802
|
+
return true;
|
|
9803
|
+
/* El host del componente: alcanza con reconocerlo aunque el `<input>` de
|
|
9804
|
+
adentro todavía no exista (los `type` con control propio lo montan
|
|
9805
|
+
condicionalmente). */
|
|
9806
|
+
if (tag === 'SUI-INPUT' || tag === 'SUI-TEXTAREA')
|
|
9807
|
+
return true;
|
|
9808
|
+
el = el.parentElement;
|
|
9809
|
+
}
|
|
9810
|
+
return false;
|
|
9811
|
+
}
|
|
9780
9812
|
class SuiInput {
|
|
9781
9813
|
// ── Core inputs (existing API — DO NOT BREAK) ────────────────────────────
|
|
9782
9814
|
size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
@@ -9872,15 +9904,22 @@ class SuiInput {
|
|
|
9872
9904
|
* hay teclado abierto, por eso escuchamos también `touchstart` (nativo iOS)
|
|
9873
9905
|
* y `mousedown` (web fallback). Cualquiera de los tres dispara el blur.
|
|
9874
9906
|
*
|
|
9875
|
-
*
|
|
9876
|
-
*
|
|
9877
|
-
* que
|
|
9878
|
-
* cada instancia de la página recibe todos los taps:
|
|
9879
|
-
*
|
|
9880
|
-
* sui-input
|
|
9881
|
-
* teclado abierto lo cierra aunque el elemento no tenga el foco.
|
|
9882
|
-
*
|
|
9883
|
-
*
|
|
9907
|
+
* Dos condiciones lo apagan, y cada una salió de un bug real en iOS:
|
|
9908
|
+
*
|
|
9909
|
+
* 1. El foco tiene que vivir DENTRO de este host. El listener es a nivel
|
|
9910
|
+
* `document`, así que cada instancia de la página recibe todos los taps:
|
|
9911
|
+
* con un blur incondicional, tocar el texto de un input cerraba el teclado
|
|
9912
|
+
* porque los OTROS sui-input hacían blur de los suyos —y en iOS un blur con
|
|
9913
|
+
* el teclado abierto lo cierra aunque el elemento no tenga el foco.
|
|
9914
|
+
*
|
|
9915
|
+
* 2. El tap NO puede ir a otro campo de texto. Ahí el navegador mueve el foco
|
|
9916
|
+
* solo, y adelantarle un blur en `pointerdown` cierra el teclado un
|
|
9917
|
+
* instante antes de que el campo nuevo lo vuelva a abrir. Ese parpadeo se
|
|
9918
|
+
* come el segundo toque de un doble tap: estando en un campo, no se podía
|
|
9919
|
+
* seleccionar una palabra de otro.
|
|
9920
|
+
*
|
|
9921
|
+
* Lo que queda es lo único que este listener tenía que hacer: tocar espacio
|
|
9922
|
+
* muerto de la pantalla baja el teclado.
|
|
9884
9923
|
*/
|
|
9885
9924
|
onDocumentTap(event) {
|
|
9886
9925
|
if (!this.closeOnOutsideClick())
|
|
@@ -9889,6 +9928,8 @@ class SuiInput {
|
|
|
9889
9928
|
const target = event.target;
|
|
9890
9929
|
if (!target || host.contains(target))
|
|
9891
9930
|
return;
|
|
9931
|
+
if (recibeTexto(target))
|
|
9932
|
+
return;
|
|
9892
9933
|
const active = document.activeElement;
|
|
9893
9934
|
if (active && host.contains(active))
|
|
9894
9935
|
active.blur();
|