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

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)}}
/>

<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

19 Replies

Jasmin•2d ago

https://playground.solidjs.com/anonymous/325c273e-c637-4e40-a180-c1e23b49f972

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

Jasmin•2d ago

it should work

McBrincie212OP•2d ago

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>
  )
}

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)}}
          />
        );
      }}
    />
  );
}

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)}}
          />
        );
      }}
    />
  );
}

Jasmin•2d ago

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

McBrincie212OP•2d ago

hmmm hold on

Jasmin•2d ago

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

McBrincie212OP•2d ago

imma strip away the uneeded stuff

Jasmin•2d ago

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.

McBrincie212OP•2d ago

mhm something else seems to change it and flip it back its not the component itself

Jasmin•2d ago

see? debugging helps 😄

McBrincie212OP•2d ago

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 removing setIsFocused causes the element to be normal i think ik whats going on YUP its this son of a [REDACTED] here

      {props.inputElement(inputStyles, fieldInits)}

      {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

thetarnav•2d ago

you might do this

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

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

kinda like Dynamic component

McBrincie212OP•2d ago

you living genius it solved immediately the problem thx it was painful

thetarnav•2d ago

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

McBrincie212OP•2d ago

oh sh_t

thetarnav•2d ago

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 () =>

McBrincie212OP•2d ago

yeh regarding that. Do want to track it 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);
        })
      },
    },

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

zulu•2d ago

unrelated, why do you focus in the onfocus

event.currentTarget.focus()

event.currentTarget.focus()

McBrincie212OP•2d ago

that was some test code i didn't know the bug to this extent

Gaming

Programming

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

Did you find this page helpful?