Validation - input type number graphical fix

[PiemP]

fix: added type=number to not repeat background
fix: moved button arrow to right

before:

after:

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
bootstrap-italia	✅ Ready (Inspect)	Visit Preview	Dec 5, 2023 3:07pm

[astagi]

Grazie @PiemP questa mi era proprio sfuggita.. devo aggiungere all'esempio di validazione un campo numerico così da vedere cosa succede, poi mergiamo

[astagi]

@PiemP perdonami non riesco a replicare il tuo problema, attualmente il campo numerico in validazione si presenta così, hai un codice per replicare il problema? Grazie!

[PiemP]

@PiemP perdonami non riesco a replicare il tuo problema, attualmente il campo numerico in validazione si presenta così, hai un codice per replicare il problema? Grazie!

mi fai vedere il codice html del tuo esempio? Lavoro su una versione più vecchia di Bootstrap Italia ma mi sembra di aver visto che il fix mancasse...magari ho preso un abbaglio.

Grazie

[PiemP]

@astagi ho capito cosa è successo! Non ho applicato la classe form-control ai miei campi input. Applicando quella classe vengono applicate le seguenti regole contenute nel file forms.scss:

.form-control {
    background-position: center right !important;
    background-repeat: no-repeat !important;
    background-size: 45px 45% !important;
}

per cui la regola che ho editato relativa alle regole del background degli elementi validi e invalidi è ridondante?

bootstrap-italia/src/scss/custom/_just-validate.scss

Lines 30 to 32 in 48f0248

	background-repeat: no-repeat;
	background-size: 37px 21px;
	background-position: right center;

bootstrap-italia/src/scss/custom/_just-validate.scss

Lines 40 to 42 in 48f0248

	background-repeat: no-repeat;
	background-size: 37px 21px;
	background-position: right center;

[astagi]

Si penso sia ridondante @PiemP , qua trovi l'esempio del campo numerico con validazione. Se ti torna tutto direi che possiamo chiudere questa PR.

[PiemP]

Scusa se ti disturbo ancora @astagi ma effettivamente ho notato un'altra cosa... io in quella circostanza uso il campo input numerico per gli importi e nell'esempio non viene usata la classe form-control...e se la applico gli allineamenti vengono sfasati. Chiudo qui e apro un'altra issue?

Oppure fixo tutto qui...la modifica relativa ai bottoni input-number-add input-number-sub resta valida in questa circostanza con qualche modifica perché, usando form-control, cambiano un pò gli ingombri.

Inoltre non sarebbe male rimuovere il codice ridondante... però mi fa un pò paura la fase di test... 😖

Attendo tue a riguardo.
Grazie e buona serata.

[astagi]

@PiemP grazie mille! in effetti si con form-control noto questo problema!

provo a mergiare sull'esempio la tua patch e vediamo se risolve

[astagi]

@PiemP ora è fixato https://bootstrap-italia-ks70rdpz6-dip-trasformazione-digitale.vercel.app/docs/esempi/form/

attendo tuo riscontro, grazie!

[PiemP]

@astagi mi sembra che il fix sul campo currency ha funzionato.

Aggiorno il codice della documentazione aggiungendo la classe form-control agli esempi. Vuoi che faccio una prova eliminando il codice ridondante dentro _just-validate.scss ?

Grazie a te.

[astagi]

Perfetto, grazie @PiemP , si se vuoi fare delle prove con la rimozione di codice eventualmente ridondante prova pure.

[PiemP]

Ci sono quasi @astagi .... ho un problemino con autocomplete... bisognerebbe far passare la classe form-control nella creazione del campo input di tipo "text"....ma non capisco come fare... se non lo sai neanche tu ripristino un paio di regole.

https://bootstrap-italia-gpm8hkcib-dip-trasformazione-digitale.vercel.app/docs/esempi/form/

Un'altra cosa delicatina, sempre riferita al campo currency, è questa modifica qui che ho fatto:

bootstrap-italia/src/scss/custom/_just-validate.scss

Lines 10 to 14 in 63a110e

	.input-number {
	.form-feedback {
	position: absolute;
	}
	}

Questo serve per non far finire fuori dal campo input la freccia in basso del bottone con la classe input-number-sub (ho provato a risolverlo usando la regola top invece di bottom ma poi ho pensato che con i campi lg sarebbe sballato di nuovo). Per sistemare le cose bisognerebbe che il messaggio di errore uscisse dal tag span.input-number di modo che il suo ingombro non venga conteggiato nell'altezza del campo input. Questo problema lo ha anche il campo autocomplete.

Un altro modo per risolvere la cosa sarebbe quella di impostare tutti i form-feedback con position: absolute e mantenere/ aumentare il margin-bottom della classe form-group per recuperare lo spazio che il form-feedback non va più ad occupare...ma io non sono un designer e non ho le conoscenze per valutare per bene una modifica di questo tipo.

Fammi sapere.
Grazie.

[astagi]

Ci guardo @PiemP al momento così al volo non saprei :/

[astagi]

@PiemP allora ho visto che per autocomplete non c'è modo di passare una classe form-control all'input che poi viene generato, forse l'unica è agire via JavaScript, devo provare (qualcosa del tipo se è stata messa la classe form-control alla generazione dell'input mettere la classe form-control).

Per il secondo punto dobbiamo un attimo riaggiornarci, pingo anche @zetareticoli e @Fupete .

Grazie per ora!

[PiemP]

Questo serve per non far finire fuori dal campo input la freccia in basso del bottone con la classe input-number-sub (ho provato a risolverlo usando la regola top invece di bottom ma poi ho pensato che con i campi lg sarebbe sballato di nuovo)

@astagi provo a vedere se riesco a creare una versione dell'input currency utilizzando input-group di bootstrap

bisognerebbe far passare la classe form-control nella creazione del campo input di tipo "text"....ma non capisco come fare... se non lo sai neanche tu ripristino un paio di regole.

questa cosa non è fondamentale... aggiungo una regola tipo:

input[aria-autocomplete] {
  background-repeat: no-repeat;
  background-size: 37px 21px;
  background-position: right center;
  &.just-validate-success-field {
    border-bottom: 1px solid #008758;
  }
  &.is-invalid {
    border-bottom: 1px solid #d9364f;
  }
}

e sistemiamo la cosa.

Il problema con form-feedback, forse si risolve per il campo currency utilizzando input-group ... rimarrebbe il problema sul campo autocomplete dove non le soluzioni permangono quelle che ho ipotizzato in precedenza.

Procedo con un test usando input-group e vedo cosa ottengo sul campo currency.

[PiemP]

Nell'ultimo commit c'e una versione del campo currency e percentage che dovrebbe supportare input-group (sorry, non ho spiegato il perchè: il vantaggio di questa soluzione è che viene supportato input-group-sm e input-group-lg mantenendo l'allineamento degli elementi in ogni situazione; inoltre il form-feedback non causa i problemi avuti in precedenza).

Se decidete che questa cosa va bene bisogna aggiornare anche i docs di modo che rispetti il nuovo formato HTML richiesto.

Ho notato un altro problema del campo currency. Se si usano i pulsanti sembra che non viene propagato l'evento di change del valore del campo numerico. Questo fa sì che il validatore non si renda conto di quando il campo ritorna in un valore corretto e sembra non far scattare la funzione di checkLimit.
Esempio sull'esempio disponibile: se nel campo importo si inserisce 2,5 euro come valore, si invia il form facendo comparire l'errore e si aumenta il valore tramite i pulsanti si ottiene che il messaggio di errore non sparisce finché non si opera sul campo con la tastiera o non si fa il submit del form.
Altro problema legato a questa cosa: la label non "sale" se si cambia i valori tramite i pulsanti.
Questa nuova problematica sembra che fosse già presente prima delle mie modifiche.

Rimangono gli altri problemi relativi al form-feedback per il campo autocomplete.

[astagi]

@PiemP mi guardo le tue considerazioni con calma oggi, intanto sono riuscito a far supportare la classe form-control al componente Autocomplete, fammi sapere se ti funziona grazie mille 👍

[PiemP]

@astagi grazie alla tua modifica rimarrebbe:

Autocomplete form-feedback:

Currency e Percentage:

• aggiornamento documentazione se vi va bene la mia soluzione di utilizzare input-group.
• verificare il discorso del change event

Volendo si potrebbe risolvere i problemi di Currency e Percentage comprendendo la necessità che ha portato a questi 2 campi: è un discorso di accessibilità? Perché parlando con un mio collega che usa screen reader, mi ha detto che a livello accessibilità i pulsanti introdotti dal browser by default funzionano bene. Si, non hanno il testo descrittivo che indicano all'utente che stai aumentando/diminuendo un importo...però non so quanto questa cosa sia necessaria.

Secondo me possiamo chiudere questo PR con l'aggiornamento della documentazione (sempre che la mia soluzione vi vada bene) ed eventualmente aprirei un issue per il discorso del form-feedback di autocomplete e per una verifica della gestione dell'evento change perché credo che questa cosa non si limiti solo a questo campo. Utilizzare l'evento input probabilmente non è corretto...non so.