SolidJS•13mo ago

I can't seem to get ref bindings correctly

I'm trying to implement spatial-navigation in my app so I want to convert this package from Reactjs to Solidjs: https://github.com/NoriginMedia/Norigin-Spatial-Navigation/ (There are only 6 files to convert and 1/2 of them are vanilla JS code) My current issue is that I can't seem to get the ref bindings correctly. Here is a hook exported from the app:

const { ref, focused } = useFocusable();

<div
    id={props.id}
    class={`media-card focusable ${
    focused ? "border-yellow-300 !duration-300" : ""
    }`}
    ref={ref}
>

const { ref, focused } = useFocusable();

<div
    id={props.id}
    class={`media-card focusable ${
    focused ? "border-yellow-300 !duration-300" : ""
    }`}
    ref={ref}
>

And here is one of my Solidjs ref implementations:

const ref: Ref<any> = (el: any) => {
  const node = el;
  console.log(el);

  SpatialNavigation.addFocusable({
    focusKey: focusKey(),
    node,
    parentFocusKey,
    preferredChildFocusKey: props.preferredChildFocusKey,
    onEnterPress: onEnterPressHandler,
    onEnterRelease: onEnterReleaseHandler,
    onArrowPress: onArrowPressHandler,
    onFocus: onFocusHandler,
    onBlur: onBlurHandler,
    onUpdateFocus: (isFocused = false) => setFocused(isFocused),
    onUpdateHasFocusedChild: (isFocused = false) =>
      setHasFocusedChild(isFocused),
    saveLastFocusedChild: props.saveLastFocusedChild || true,
    trackChildren: props.trackChildren || false,
    isFocusBoundary: props.isFocusBoundary || false,
    focusBoundaryDirections: props.focusBoundaryDirections,
    autoRestoreFocus: props.autoRestoreFocus || true,
    forceFocus: props.forceFocus || false,
    focusable: props.focusable || true,
  });
  return el;
};

const ref: Ref<any> = (el: any) => {
  const node = el;
  console.log(el);

  SpatialNavigation.addFocusable({
    focusKey: focusKey(),
    node,
    parentFocusKey,
    preferredChildFocusKey: props.preferredChildFocusKey,
    onEnterPress: onEnterPressHandler,
    onEnterRelease: onEnterReleaseHandler,
    onArrowPress: onArrowPressHandler,
    onFocus: onFocusHandler,
    onBlur: onBlurHandler,
    onUpdateFocus: (isFocused = false) => setFocused(isFocused),
    onUpdateHasFocusedChild: (isFocused = false) =>
      setHasFocusedChild(isFocused),
    saveLastFocusedChild: props.saveLastFocusedChild || true,
    trackChildren: props.trackChildren || false,
    isFocusBoundary: props.isFocusBoundary || false,
    focusBoundaryDirections: props.focusBoundaryDirections,
    autoRestoreFocus: props.autoRestoreFocus || true,
    forceFocus: props.forceFocus || false,
    focusable: props.focusable || true,
  });
  return el;
};

Continuation ⬇️

GitHub

GitHub - NoriginMedia/Norigin-Spatial-Navigation: React Hooks based...

React Hooks based Spatial Navigation (Key & Remote Control Navigation) / Web Browsers, Smart TVs and Connected TVs - GitHub - NoriginMedia/Norigin-Spatial-Navigation: React Hooks based Spat...

7 Replies

crowned•13mo ago

And here is another:

let ref;

onMount(() => {
  const node = ref;

  SpatialNavigation.addFocusable({
    focusKey: focusKey(),
    node,
    parentFocusKey,
    preferredChildFocusKey: props.preferredChildFocusKey,
    onEnterPress: onEnterPressHandler,
    onEnterRelease: onEnterReleaseHandler,
    onArrowPress: onArrowPressHandler,
    onFocus: onFocusHandler,
    onBlur: onBlurHandler,
    onUpdateFocus: (isFocused = false) => setFocused(isFocused),
    onUpdateHasFocusedChild: (isFocused = false) =>
      setHasFocusedChild(isFocused),
    saveLastFocusedChild: props.saveLastFocusedChild || true,
    trackChildren: props.trackChildren || false,
    isFocusBoundary: props.isFocusBoundary || false,
    focusBoundaryDirections: props.focusBoundaryDirections,
    autoRestoreFocus: props.autoRestoreFocus || true,
    forceFocus: props.forceFocus || false,
    focusable: props.focusable || true,
  });
});

let ref;

onMount(() => {
  const node = ref;

  SpatialNavigation.addFocusable({
    focusKey: focusKey(),
    node,
    parentFocusKey,
    preferredChildFocusKey: props.preferredChildFocusKey,
    onEnterPress: onEnterPressHandler,
    onEnterRelease: onEnterReleaseHandler,
    onArrowPress: onArrowPressHandler,
    onFocus: onFocusHandler,
    onBlur: onBlurHandler,
    onUpdateFocus: (isFocused = false) => setFocused(isFocused),
    onUpdateHasFocusedChild: (isFocused = false) =>
      setHasFocusedChild(isFocused),
    saveLastFocusedChild: props.saveLastFocusedChild || true,
    trackChildren: props.trackChildren || false,
    isFocusBoundary: props.isFocusBoundary || false,
    focusBoundaryDirections: props.focusBoundaryDirections,
    autoRestoreFocus: props.autoRestoreFocus || true,
    forceFocus: props.forceFocus || false,
    focusable: props.focusable || true,
  });
});

I have also tried this:

let ref: Ref<any> = (el: any) => {
  return el;
};

onMount(() => {
  const node = ref();

  SpatialNavigation.addFocusable({
    focusKey: focusKey(),
    node,
    parentFocusKey,
    preferredChildFocusKey: props.preferredChildFocusKey,
    onEnterPress: onEnterPressHandler,
    onEnterRelease: onEnterReleaseHandler,
    onArrowPress: onArrowPressHandler,
    onFocus: onFocusHandler,
    onBlur: onBlurHandler,
    onUpdateFocus: (isFocused = false) => setFocused(isFocused),
    onUpdateHasFocusedChild: (isFocused = false) =>
      setHasFocusedChild(isFocused),
    saveLastFocusedChild: props.saveLastFocusedChild || true,
    trackChildren: props.trackChildren || false,
    isFocusBoundary: props.isFocusBoundary || false,
    focusBoundaryDirections: props.focusBoundaryDirections,
    autoRestoreFocus: props.autoRestoreFocus || true,
    forceFocus: props.forceFocus || false,
    focusable: props.focusable || true,
  });
});

let ref: Ref<any> = (el: any) => {
  return el;
};

onMount(() => {
  const node = ref();

  SpatialNavigation.addFocusable({
    focusKey: focusKey(),
    node,
    parentFocusKey,
    preferredChildFocusKey: props.preferredChildFocusKey,
    onEnterPress: onEnterPressHandler,
    onEnterRelease: onEnterReleaseHandler,
    onArrowPress: onArrowPressHandler,
    onFocus: onFocusHandler,
    onBlur: onBlurHandler,
    onUpdateFocus: (isFocused = false) => setFocused(isFocused),
    onUpdateHasFocusedChild: (isFocused = false) =>
      setHasFocusedChild(isFocused),
    saveLastFocusedChild: props.saveLastFocusedChild || true,
    trackChildren: props.trackChildren || false,
    isFocusBoundary: props.isFocusBoundary || false,
    focusBoundaryDirections: props.focusBoundaryDirections,
    autoRestoreFocus: props.autoRestoreFocus || true,
    forceFocus: props.forceFocus || false,
    focusable: props.focusable || true,
  });
});

But they all return undefined How can I properly pass the ref into the hook (and allow for updates)? Or is there a better or pre-made way to implement spatial naviagation in solidjs apps?

REEEEE•13mo ago

try using a signal you can either have the signal outside where the useFocusable hook is used or make it part of the hook and return the setter

const [ref, setRef] = createSignal<HTMLElement>()
const { focused } = useFocusable(refSignal);

<div ref={setRef} />

...

const useFocusable = (ref: Accessor<HTMLElement | undefined>) => {

  let initialized = false
  createEffect(() => {
    if(initialized) return;
    const node = ref()
    ...other stuff here
  })
}

const [ref, setRef] = createSignal<HTMLElement>()
const { focused } = useFocusable(refSignal);

<div ref={setRef} />

...

const useFocusable = (ref: Accessor<HTMLElement | undefined>) => {

  let initialized = false
  createEffect(() => {
    if(initialized) return;
    const node = ref()
    ...other stuff here
  })
}

const { focused, setRef } = useFocusable();

<div ref={setRef} />

...

const useFocusable = () => {
  const [ref, setRef] = createSignal<HTMLElement>()
  let initialized = false
  createEffect(() => {
    if(initialized) return;
    const node = ref()
    ...other stuff here
  })

  return {focused, setRef}
}

const { focused, setRef } = useFocusable();

<div ref={setRef} />

...

const useFocusable = () => {
  const [ref, setRef] = createSignal<HTMLElement>()
  let initialized = false
  createEffect(() => {
    if(initialized) return;
    const node = ref()
    ...other stuff here
  })

  return {focused, setRef}
}

crowned•13mo ago

Okay. I'll try that once I get to my laptop. Hey. I just tried this (creating the signal in the hook and returning the setter) and it worked. Thanks a lot.

grobitto•2mo ago

Hi! Do you have any progress with porting this library? Have the same task in front of me and I wonder if anyone already did that

crowned•2mo ago

Hi! I already ported it completely. I'll push the code to a new repo when I get home.

grobitto•2mo ago

Oh, thats great

crowned•2mo ago

Yupp

Gaming

Programming

I can't seem to get ref bindings correctly