#Updating a signal depending on if an element is focused or not

65 messages · Page 1 of 1 (latest)

ashen copper
#

I want to update a signal on whenever a element gains focus or not(true / false)

<input
  style={{'border-radius': borderRadius()}}
  class={styles["input-text-element"]}
  name={"1"}
  ref={inputTextElement}
  onfocus={() => {
    setIsFocused(true);
    console.log("wtf?", isFocused())
  }}
  onblur={() => {setIsFocused(false)}}
/>

Tho if i do this, the focus gets used onfocus and doesn't trigger the expected behaiviour

hallow violet
#

it should work

ashen copper
#

huh

#

then something else f_cks it up

#

imma supply the full code

# 
export default function InputFieldComponent(props: InputFieldProps) {
  // <...>

  return (
    <div
      class={`${styles['input-field-container']} ${
        props.getIsDisabled() ? styles['input-field-container-disabled'] : ''
      } ${props.classInjects['mainToggleInject'] || ''}`}
      ref={inputFieldContainer}
    >
      {props.inputElement(inputStyles, fieldInits)}
    </div>
  )
}

This is a base component for the input-related components to use

#

and this is the input component i am making

# 
export default function InputTextComponent(props: InputTextProps) {
  let inputTextElement!: HTMLInputElement;

  const getIsDisabled: Accessor<boolean> = getterFromReactive(props.disabled || false);
  const [isFocused, setIsFocused] = createSignal(false);

  return (
    <InputFieldComponent
      getIsDisabled={getIsDisabled}
      focusHandler={isFocused}
      // <...>
      inputElement={(style, fieldInits) => {
        // <...>

        return (
          <input
            class={styles["input-text-element"]}
            name={"1"}
            ref={inputTextElement}
            onfocus={(event) => {
              event.currentTarget.focus()
              setIsFocused(true);
            }}
            onblur={() => {setIsFocused(false)}}
          />
        );
      }}
    />
  );
}
hallow violet
#

very hard to debug code snippets like this. It would be best if you could provide a working reproduction where I can go, execute it and make changes to debug

ashen copper
#

hmmm

#

hold on

hallow violet
#

it's a lot of effort for someone that has never seen your code to read through this and try to find the mistake

ashen copper
#

imma strip away the uneeded stuff

hallow violet
#

thanks!

#

yeah, try to make the smallest repro possible where the issue still occurs

#

maybe this helps already and you'll find the issue yourself

#

it's generally how I would move when I have a weird issue like this. People on the discord can't really help you that well if you haven't broken down the issue yourself.

ashen copper
#

mhm

#

something else seems to change it and flip it back

#

its not the component itself

hallow violet
#

see? debugging helps 😄

ashen copper
#

apart from that its pain in the a##

#

ok so

#

whatever thing does this sh_t

#

it sets it to false immediately

#

the weirdest part

#

is i provided a accessor

ashen copper
#

i think ik whats going on

#

YUP

#

its this son of a [REDACTED] here

      {props.inputElement(inputStyles, fieldInits)}
#

solidjs re-renders this

#

when inputStyles change

#

and bc im changing it based on focusing

#

in short, ]it f_cks up

strange moss
#

you might do this

<>
{(() => {
  let {inputElement} = props // props.inputElement gets tracked
  return untrack(() => inputElement(inputStyles, fieldInits))
})()}
<>

kinda like Dynamic component

ashen copper
#

you living genius

#

it solved immediately the problem

#

thx

#

it was painful

strange moss
#

o7

#

components are usually untracked when called like <Component/>

#

so it might be surprising when you call then like Component()

#

but the real issue is probably this const getIsDisabled: Accessor<boolean> = getterFromReactive(props.disabled || false);

#

it doesn't track props.disabled

ashen copper
#

oh sh_t

strange moss
#

if you used the solid eslint plugin it would probably complain about it

#

but anyway
almost alvays when you are accessing props you want to do that in () =>

ashen copper
#

tho wait

#

i don't think it will be needed

#

this is worse of a bug than i thought

#

the "christmas" animation doesn't work on the input text component

#

by some miracle

#

i squashed the bug

#

without even realising it

#

here is some jargin code i wrote

# 
tieActiveDisabledFieldToCSSVariable: (
        inactiveField: keyof T, activeField: keyof T,
        element: HTMLElement, cssVar: string
      ) => {
        // Completely cursed code
        const currentField: Accessor<string> = (
          getterForReactiveColorField.bind(
            stylesGetter(),
            isDisabled,
            isToggled
          ) as (inactiveColorField: keyof T, activeColorField: keyof T) => Accessor<string>
        )(inactiveField, activeField);
        createEffect(() => {
          const value: string = currentField();
          element.style.setProperty(`--${cssVar}`, value);
        })
      },
    },
#

so ur eyes can burn a bit more

#

one problem tho im noticing is the styles just don't apply

#

nvm

#

im just an idiot

cloud vigil
#

unrelated, why do you focus in the onfocus

event.currentTarget.focus()
ashen copper
#

that was some test code