SolidJS•10mo ago

Createeffect not working in component where signal was defined

I am pretty new to programming so it is possible I have some kind of oversite. but in this code:

import FMHome from "./FMHome";
import FMSearch from "./FMSearch";
import FMBookmark from "./FMBookmark";
import FMAccount from "./FMAccount";
import "./floatingMenuStyles/fmStyle.css";
import "./floatingMenuStyles/fmItemStyle.css";
import { createEffect, createSignal } from "solid-js";

type MenuStates =
  | "allClosed"
  | "homeOpen"
  | "searchOpen"
  | "bookmarkOpen"
  | "loading";

export const [menuState, setMenuState] = createSignal<MenuStates>("homeOpen");

export default function FloatingMenu() {
  createEffect(() => {
    console.log(menuState());
  });
  return (
    <>
      <div class="floatingMenuContainer">
        <FMHome />
        <FMSearch />
        <FMBookmark />
        <FMAccount />
      </div>
    </>
  );
}

import FMHome from "./FMHome";
import FMSearch from "./FMSearch";
import FMBookmark from "./FMBookmark";
import FMAccount from "./FMAccount";
import "./floatingMenuStyles/fmStyle.css";
import "./floatingMenuStyles/fmItemStyle.css";
import { createEffect, createSignal } from "solid-js";

type MenuStates =
  | "allClosed"
  | "homeOpen"
  | "searchOpen"
  | "bookmarkOpen"
  | "loading";

export const [menuState, setMenuState] = createSignal<MenuStates>("homeOpen");

export default function FloatingMenu() {
  createEffect(() => {
    console.log(menuState());
  });
  return (
    <>
      <div class="floatingMenuContainer">
        <FMHome />
        <FMSearch />
        <FMBookmark />
        <FMAccount />
      </div>
    </>
  );
}

the createEffect to log menuState will not work in a child component FMSearch:

2 Replies

TheOinkinator•10mo ago

import { createEffect, createSignal } from "solid-js";
import { menuState, setMenuState } from "./FloatingMenu";

let searchBar: HTMLDivElement;
let searchBarInput: HTMLInputElement;
let searchCloseButton: HTMLDivElement;

const openSearch = () => {
  searchBar.style.width =
    "calc(var(--MenuHeight) * 2.2 + var(--SearchBarWidth))";
  searchBar.style.gridTemplateColumns =
    "var(--MenuHeight) 1fr var(--MenuHeight)";
  searchBarInput.style.cursor = "text";
  searchCloseButton.style.display = "grid";
};
const closeSearch = () => {
  searchBar.style.width = "var(--MenuHeight)";
  searchBar.style.gridTemplateColumns = "var(--MenuHeight) 0 0";
  searchCloseButton.style.display = "none";
  //Logic
  searchBarInput.blur();
};

export default function FMSearch() {
  createEffect(() => {
    if (menuState() === "searchOpen") {
      openSearch();
    } else {
      closeSearch();
    }
  });

  return (
    <>
      <div classList={{ menuItemContainer: true }}>
        <div
          ref={searchBar}
          classList={{ button: true }}
          onClick={() => {
            if (menuState() !== "searchOpen") {
              searchBarInput.focus();
            }
          }}
        >
          <div id="FMSearchIcon"></div>
          <input
            ref={searchBarInput}
            tabindex="0"
            id="searchInput"
            value="Start searching"
            type="text"
            onFocusIn={() => {
              setMenuState("searchOpen");
            }}
            onFocusOut={() => {
              setMenuState("loading");
            }}
          />
          <div
            id="searchCloseButton"
            ref={searchCloseButton}
            onClick={() => {
              setTimeout(() => {
                setMenuState("loading");
                searchBarInput.blur();
              }, 1);
            }}
          >
            <div></div>
            <div></div>
          </div>
        </div>
      </div>
    </>
  );
}

import { createEffect, createSignal } from "solid-js";
import { menuState, setMenuState } from "./FloatingMenu";

let searchBar: HTMLDivElement;
let searchBarInput: HTMLInputElement;
let searchCloseButton: HTMLDivElement;

const openSearch = () => {
  searchBar.style.width =
    "calc(var(--MenuHeight) * 2.2 + var(--SearchBarWidth))";
  searchBar.style.gridTemplateColumns =
    "var(--MenuHeight) 1fr var(--MenuHeight)";
  searchBarInput.style.cursor = "text";
  searchCloseButton.style.display = "grid";
};
const closeSearch = () => {
  searchBar.style.width = "var(--MenuHeight)";
  searchBar.style.gridTemplateColumns = "var(--MenuHeight) 0 0";
  searchCloseButton.style.display = "none";
  //Logic
  searchBarInput.blur();
};

export default function FMSearch() {
  createEffect(() => {
    if (menuState() === "searchOpen") {
      openSearch();
    } else {
      closeSearch();
    }
  });

  return (
    <>
      <div classList={{ menuItemContainer: true }}>
        <div
          ref={searchBar}
          classList={{ button: true }}
          onClick={() => {
            if (menuState() !== "searchOpen") {
              searchBarInput.focus();
            }
          }}
        >
          <div id="FMSearchIcon"></div>
          <input
            ref={searchBarInput}
            tabindex="0"
            id="searchInput"
            value="Start searching"
            type="text"
            onFocusIn={() => {
              setMenuState("searchOpen");
            }}
            onFocusOut={() => {
              setMenuState("loading");
            }}
          />
          <div
            id="searchCloseButton"
            ref={searchCloseButton}
            onClick={() => {
              setTimeout(() => {
                setMenuState("loading");
                searchBarInput.blur();
              }, 1);
            }}
          >
            <div></div>
            <div></div>
          </div>
        </div>
      </div>
    </>
  );
}

The exact same createeffect works with no issue. I would love an explanation of whate is happening

thetarnav•10mo ago

I don’t see anything obvious for why this would be happening. Do you use ssr? Are you able to reproduce that using solid playground? Also how do you don’t know that the effect is not working? if you just log the state there as well, does it still not show up?

Gaming

Programming

Createeffect not working in component where signal was defined