diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/mui/input/InputBase.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/mui/input/InputBase.tsx | 16 |
1 files changed, 11 insertions, 5 deletions
diff --git a/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx b/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx index e1c6e7af1..94304f16b 100644 --- a/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx +++ b/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx @@ -60,8 +60,8 @@ export function InputBaseRoot({ const fcs = useFormControl({}); return ( <div - data-disabled={disabled} - data-focused={focused} + data-disabled={!disabled ? undefined : true} + data-focused={!focused ? undefined : true} data-multiline={multiline} data-hasStart={!!startAdornment} data-hasEnd={!!endAdornment} @@ -116,6 +116,12 @@ const componentStyle = css` duration: theme.transitions.duration.shorter, })}; } + &:not(focus)::placeholder { + opacity: 0; + } + &:focus::placeholder { + opacity: ${theme.palette.mode === "light" ? 0.42 : 0.5}; + } &:focus { outline: 0; } @@ -292,11 +298,11 @@ export function InputBase({ <Root {...fcs} onClick={handleClick}> <FormControlContext.Provider value={null}> <Input - aria-invalid={fcs.error} + aria-invalid={fcs.error ? true : undefined} // aria-describedby={} - disabled={fcs.disabled} + disabled={fcs.disabled ? true : undefined} name={name} - placeholder={placeholder} + placeholder={!placeholder ? undefined : placeholder} readOnly={readOnly} required={fcs.required} rows={rows} |