Feil: Baseinput counter oppdatere seg ikke og ligger midt i høyden

[PernilleWelle-Watne]

Steg for å gjenskape

Counteren oppdaterer seg ikke i Baseinput og den ligger litt rart.

 <InputGroup
          className="input jkl-text-area"
          label={sporsmalstekst}
          labelProps={{ variant }}
          errorLabel={error?.message}
          render={(inputProps) => (
            <>
              <SupportLabel
                id={`${id}-help`}
                labelType="help"
                label={hjelpetekst}
                className="mb-12 mt-2 "
              />
              <BaseTextArea
                {...inputProps}
                {...register(fieldName)}
                counter={
                  true
                    ? {
                        maxLength: 200,
                        hideProgress: false,
                      }
                    : undefined
                }
              />
            </>
          )}
        ></InputGroup>

Forventet oppførsel

At counteren oppdaterer seg

[ivarni]

Quick-fix er å legge til klassen jkl-text-area--with-counter på <InputGroup> men her burde vi se på en bedre løsning for dette i jøkul dersom vi skal støtte å at man bruker <BaseTextArea> til dette selv. Rent teknisk kunne vi nok sett på å bruke :has( ) selectoren.

[PernilleWelle-Watne]

Når jeg putter på en ny className på BaseTextArea så mister den alle den hadde fra før. Også oppdaterer ikke counteren seg

[ivarni]

Den må settes oppe på <InputGroup>, det er derfor akkurat det med counteren ikke fungerer helt ut av boksen når man bruker base-komponenten.

Men jeg ser at da oppdaterer den seg heller ikke før på blur, så det fiksa bare layouten 😞

[ivarni]

Det ser ut som telleren bare oppdaterer seg dersom komponenten brukes som en controlled component, uavhengig av om man bruker <TextArea> eller <BaseTextArea>.

[PernilleWelle-Watne]

Skal jeg putte den i en Controller? Vi bruker React hook form

[ivarni]

Det vil nok fungere med en Controller rundt hele InputGroup, legge på klassenavnet der og så sende inn value til BaseTextInput, men jeg tror at med fiksen i den linkede PRen trenger dere ikke noen av delene.