Category: javascript

Category Added in a WPeMatico Campaign

Is it bad practice to make useEffect respond to an user action like this?

In the following code, I wanted to put all the collapsible logic into the Collapsible component. However, the collapse is being triggered by a button that’s outside of Collapsible. So I made Collapsible to react to that button’s onClick. For that, I had to use useEffect:

// JS:

const [collapsed, setCollapsed] = useState(true);

// JSX:

<div className="flex w-full justify-between">
  <Heading size="sm" className="shrink-0">
    Tags
  </Heading>
  <Button
    variant="link"
    onClick={() => setCollapsed(!collapsed)}
    className="md:hidden"
  >
    {collapsed ? (
      <IconChevronDown size={20} />
    ) : (
      <IconChevronUp size={20} />
    )}
  </Button>
</div>
<Collapsible collapsed={collapsed} className="md:hidden">
  <div className="mt-4 w-full">{renderedTags}</div>
</Collapsible>

Inside Collapsible, I have this:

useEffect(() => {
  if (collapsed) {
    setMaxHeight('0px');
  } else if (contentRef.current) {
    setMaxHeight(`${contentRef.current.scrollHeight}px`);
  }
}, [collapsed]);

Do you think using useEffect like this to react to user input is bad practice? To prevent that, I could create a useCollapsible hook, but that would separate the collapsible logic from the Collapsible component.

Prevent scroll on focus when using keyboard

I’m trying to build an accessible accordion with separate navigation and find that when focusing the input that controls the state of the pane, it scrolls down the page.

(($) => {
    $(document).on('focus', 'input', (e) => e.preventDefault());
})(jQuery);
.row {
  display: flex;
  gap: 2rem;
  .col {
    &:first-child {
      flex: 1 0 20%;
    }
    &:last-child {
      & > div {
        grid-template-rows: 1fr;
        opacity: 1;
        display: grid;
        transition: grid-template-rows 250ms ease, opacity 250ms ease;
        div {
          overflow: hidden;
        }
      }
      input {
        position: absolute;
        left: -100%;
        opacity: 0;
        &:not(:checked) {
          & + div {
            grid-template-rows: 0;
            opacity: 0;
          }
        }
      }
    }
  }
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="row">
  <div class="col">
    <ul>
      <li><label for="category-1">Category 1</label></li>
      <li><label for="category-2">Category 2</label></li>
      <li><label for="category-3">Category 3</label></li>
      <li><label for="category-4">Category 4</label></li>
      <li><label for="category-5">Category 5</label></li>
      <li><label for="category-6">Category 6</label></li>
    </ul>
  </div>
  <div class="col">
    <input type="radio" checked="checked" name="category" id="category-1" value="category-1">
    <div>
      <div>
        <h2>Category 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
      </div>
    </div>
    <input type="radio" name="category" value="category-2" id="category-2">
    <div>
      <div>
        <h2>Category 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
      </div>
    </div>
    <input type="radio" name="category" value="category-3" id="category-3">
    <div>
      <div>
        <h2>Category 3</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
      </div>
    </div>
    <input type="radio" name="category" value="category-4" id="category-4">
    <div>
      <div>
        <h2>Category 4</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
      </div>
    </div>
    <input type="radio" name="category" value="category-5" id="category-5">
    <div>
      <div>
        <h2>Category 5</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
      </div>
    </div>
    <input type="radio" name="category" value="category-6" id="category-6">
    <div>
      <div>
        <h2>Category 6</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/gRoberts/84zfbu0j/

Only one pane is designed to show at any one time, so it uses css transitions to hide/show the inactive/active panes, which all works fine but I believe that at the point of focus, the browser scrolls to the element as it’s transitioning causing it jump down the page.

I’ve tried to prevent the focus event (suggested elsewhere), but this does nothing and using tabindex="-1" will break any accessibility I have with the input.

(($) => {
    $(document).on('focus', 'input', (e) => e.preventDefault());
})(jQuery);

Using as little javascript as possible (I am not using jQuery but have used it in the fiddle for brevity), I would like the user to be able to click on the nav on the left to activate the required category but also use the keyboard to navigate back/forth between categories.

I believe the only solution would be to intervene and animate to the top of the element each time the category is changed but it would be good if it could prevent any scrolling on focus.

Any suggestions?

PointCloud2 is not display correct

I have a relatively large point cloud data with max_pts set to a maximum of 150000000. PointCloud2 loads the latest data and cleans up old data every time. How to accumulate and display data each time

This is the code for me to load point cloud according to the official example

[enter image description here]
(https://i.sstatic.net/26ia0gXM.png)

This is the source code of PointCloud2 that I reviewed. This code updates the latest received data every time, and old data is replaced

[enter image description here]
(https://i.sstatic.net/Q28e8YnZ.png)

[enter image description here]
(https://i.sstatic.net/CbkhVsKr.png)

If I want new data to accumulate and display data without replacing old data, I should need to change the source code of PointCloud2.

My data is pushed repeatedly, and the new data pushed each time does not include the data that has already been pushed. However, I am not sure how to push new data that includes the data that has already been pushed

Userscript Can’t Run on Google Search Console Pages?

I’m trying to create a script which will allow the exclusion of certain results on the “not indexed” page of Google Search Console, to alleviate reviewing things repeatedly.

Violentmonkey reports the script is active on the specified inclusion page, but I can’t get any code to fire. Console doesn’t report anything as far as a block on userscripts. Any insights appreciated

// ==UserScript==
// @name         Google Index Excludes
// @include https://search.google.com/search-console/index/*
// @require http://code.jquery.com/jquery-3.4.1.min.js
// @require     https://cdnjs.cloudflare.com/ajax/libs/arrive/2.4.1/arrive.min.js
// @version 1
// ==/UserScript==

alert('got script');
$(document).ready(function(){

    console.log('got script');
    document.body.arrive('.nJ0sOc',{fireOnAttributesModification:true,existing:true,onceOnly:true},function(){
    
        console.log('got row');
        $(this).prepend("<td class='exclude'><a href='#'>X</a></td>");
    });
});

Dropdown on vue template not working even if the toggle function is called

I am trying a simple dropdown on a vue project. But the dropdown doesnt drop when I click on it. I have put the console inside the function. The message gets displayed on console that means the function is being called. But it doesnt work.

<template>
  <div class="dropdown">
    <button @click="toggleDropdown" class="dropdown-button">
      {{ selectedOption || "Select an option" }}
    </button>
    <ul v-if="isOpen" class="dropdown-menu">
      <li v-for="option in options" :key="option" @click="selectOption(option)">
        {{ option }}
      </li>
    </ul>
  </div>
</template>


<script>
export default {
  name: "DropDown", // Adding name to the component
  data() {
    return {
      isOpen: false,
      selectedOption: null,
      options: ["Option 1", "Option 2", "Option 3"],
    };
  },
  methods: {
    toggleDropdown() {
      console.log("Button clicked");
      this.isOpen = !this.isOpen;
    },
    selectOption(option) {
      this.selectedOption = option;
      this.isOpen = false;
    },
  },
};
</script>

<style scoped>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-button {
  padding: 10px;
  background-color: #3498db;
  color: white;
  border: none;
  cursor: pointer;
}

.dropdown-menu {
  position: absolute;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.dropdown-menu li {
  padding: 10px;
  cursor: pointer;
}

.dropdown-menu li:hover {
  background-color: #ddd;
}
</style>

JQuery *sometimes* loading too late: $ is not defined

I am using JQuery to load a page via the following syntax

$(function(){
  $("#navbarImport").load("/navbar/navbar.html"); 
});

to load the content of navbar.html into a in a target html file. However, this works about half the time – refreshing the page causes the navbar to load half the time, otherwise it will give me

“Uncaught ReferenceError: $ is not defined”.

The same error occurs respectively if I replace “$” with “jQuery”. The above code snippet is my entire js file.

When importing the scripts, I import the JQuery script first. In the target html file, my scripts are structured as such:

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="./my_script.js"></script>

Why movementX in a pointer lock events returns a sum of movements instead of individual ones?

Recently my code depends on Pointer Lock API cannot work properly on Firefox and Edge, but still works fine on Chrome.

I tried printing the mousemove event after requestPointerLock(), finding that the movementX and movementY value seems to be a sum of movements from the first click, instead of individual movement that is said at the specifics.

I am pretty sure that it was working several weeks ago, but it suddenly cannot work anymore.

Firstly I thought it was my problem, but after debugging, I believed that browser behavior was no longer correct.

I tried the MDN example, but it was also broken on Firefox. I could only see the red balls flying around at ultra speed instead of moving smoothly.

new NativeEventEmitter() requires a non-null argument

I am encountering an error when trying to register the foreground service using ReactNativeForegroundService from the @supersami/rn-foreground-service library. The same code works correctly on Android, but I am facing issues on iOS.

Code:

import ReactNativeForegroundService from "@supersami/rn-foreground-service";

const config = {
  config: {
    alert: true,
    onServiceErrorCallBack: function () {
      console.warn('[ReactNativeForegroundService] onServiceErrorCallBack', arguments);
    },
  }
};

ReactNativeForegroundService.register(config);

Error:

ERROR  Invariant Violation: `new NativeEventEmitter()` requires a non-null argument., js engine: hermes
WARN  Module ReactNativeEventEmitter requires main queue setup since it overrides `init` but doesn't implement `requiresMainQueueSetup`. In a future release React Native will default to initializing all native modules on a background thread unless explicitly opted-out of.
LOG  Running "Cerge" with {"rootTag":21,"initialProps":{}}

Environment:

  • React Native version: “0.71.19”

  • Library version: “^2.1.1”

  • JS Engine: Hermes

  • Platform: iOS

Steps to Reproduce:

  1. Install the @supersami/rn-foreground-service library.

  2. Use the ReactNativeForegroundService.register(config) method in the code as shown above.

  3. Run the app on iOS with Hermes enabled.

Expected Behavior: The service should register without errors.

Actual Behavior: The error new NativeEventEmitter() requires a non-null argument occurs, and the warning about requiresMainQueueSetup appears.

Additional Context: This issue appears to be related to how the NativeEventEmitter is being initialized with a null or undefined argument. The warning suggests the module may need to implement requiresMainQueueSetup.

I tried installing the latest version of the @supersami/rn-foreground-service library and registering the service using both the configuration method and the simplified approach like this:

ReactNativeForegroundService.register({id: 144});

However, nothing worked, and I still received the same error.

Rotation Animation in A-Frame and THREE.js Not Centering on Calculated Centroid

I am working on a 3D visualization project using A-Frame and THREE.js where I need to perform trasnformations on an object (container) around its dynamically calculated centroid. However, I am encountering an issue where the centroid appears to ‘drift’ during the rotation step.

Problem Description: I have calculated the centroid of a model triangle in my scene and am attempting to rotate the container around this centroid. The expected behavior is that the centroid remains stationary in world space throughout the animation, but it seems to shift, indicating a possible issue with how the rotation’s pivot is being set.

I have a glitch example here – you can see three phases of trying to align the two triangles. The first two, translation and scaling, work fine. But the rotation is drifting.

Glitch code here.

What I’ve Tried:

Applied the rotation in world coordinates by translating to and from the centroid.
Checked for any parent transformations that might be affecting world positions.
Despite these efforts, the centroid still appears to move slightly after the rotation, suggesting the rotation might not be correctly centered around the centroid as intended.

Question: Could there be an issue with how I’m handling the translation or rotation in THREE.js? How can I ensure that the rotation is precisely centered on the centroid in world space, maintaining the centroid’s position static throughout the animation?

Unable to set State in React in UseEffect With ‘popstate’ eventListener

I have a useEffect in React. In this useEffect I have a popstate eventListener. This eventListener successfully triggers if I visit the page, then visit another page, then press back to go back to the page with this code on it.

Although the eventListener trigger, if I try to set state inside the function attached to the event listener and then log the state to the console, the state is always undefined. This is not the case if I use a pageshow eventListener, so I am reasonably confident it has to do with popstate.

I have tried using a setTimeout around the state. I have tried moving the function outside the useEffect. I have also tried using useLayoutEffect. Neither work and the state is always undefined.

How can I use a popstate event listener to successfully set the state? I need to do something when the user arrives at the page from the back or forward button.

useEffect(() => {
  const handlePopState = () => {
     setSomeState("test value"); 
  };

  window.addEventListener('popstate', handlePopState);

  return () => {
    window.removeEventListener('popstate', handlePopState);
  };
}, []);

Why is the Payload Null in My Redux Action?

I am working on a React project using Redux (not Redux Toolkit) and facing an issue where the payload in my Redux action is null. I’m using Firebase for authentication, and I’m trying to dispatch the setCurrentUser action with the user information, but it seems to be resulting in a null payload.

// Action creator
export const setCurrentUser = user => ({
    type: 'SET_CURRENT_USER',
    payload: user,
});

// User reducer
const INITIAL_STATE = {
    currentUser: null,
};

const userReducer = (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case 'SET_CURRENT_USER':
            return {
                ...state,
                currentUser: action.payload,
            };
        default:
            return state;
    }
};

// App component
class App extends React.Component {
    unsubscribeFromAuth = null;
    unsubscribeFromSnapshot = null;

    componentDidMount() {
        const { setCurrentUser } = this.props;

        this.unsubscribeFromAuth = auth.onAuthStateChanged(async userAuth => {
            if (userAuth) {
                const userRef = await createUserProfileDocument(userAuth);

                this.unsubscribeFromSnapshot = onSnapshot(userRef, snapShot => {
                    setCurrentUser({
                        id: snapShot.id,
                        ...snapShot.data(),
                    });
                });
            } else {
                setCurrentUser(null); // This might be causing the null payload
            }
        });
    }

    componentWillUnmount() {
        if (this.unsubscribeFromAuth) this.unsubscribeFromAuth();
        if (this.unsubscribeFromSnapshot) this.unsubscribeFromSnapshot();
    }

    render() {
        return (
            <div>
                <Header />
                <Routes>
                    <Route path="/" element={<HomePage />} />
                    <Route path="/shop" element={<ShopPage />} />
                    <Route path="/signin" element={<SignInAndSignUpPage />} />
                </Routes>
            </div>
        );
    }
}

const mapDispatchToProps = dispatch => ({
    setCurrentUser: user => dispatch(setCurrentUser(user)),
});

When I check the action dispatched, the payload is null

{type: 'SET_CURRENT_USER', payload: null}

I set up Firebase authentication in my React app and dispatched a Redux action to set the current user.I expected the action to dispatch the user’s information upon successful login.

Expo Camera intermittently unresponsive in iOS build

I’m using the latest version of Expo Camera in my expo react native project and recently the camera has just been performing much worse than before. I’ve tried recreating the issue here:

import React, { useState, useRef } from 'react';
import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';
import { CameraView, useCameraPermissions } from 'expo-camera';
import { useRoute } from '@react-navigation/native';

export default function CameraScreen() {
const [hasPermission, requestPermission] = useCameraPermissions();
const [isRecording, setIsRecording] = useState(false);
const [cameraRef, setCameraRef] = useState(null);
const [msg, setMsg] = useState('')
const isVideo = false

// const route = useRoute();
// const { page, photoID, id, isVideo } = route.params || {};

const handleCapture = async () => {
if (cameraRef) {
if (isVideo) {
if (isRecording) {
setIsRecording(false);
// Stop recording without expecting a return value
await cameraRef.stopRecording();
console.log('Stopped recording.');
setMsg('Stopped recording.')
} else {
console.log('Recording video...');
setMsg('Recording video...')
setIsRecording(true);
try {
// Start recording and get the video data
const videoData = await cameraRef.recordAsync();
console.log('Video recorded:', videoData.uri);
setMsg('Video recorded: ', videoData.uri)
} catch (error) {
setMsg('Error recording video:', error)
console.error('Error recording video:', error);
}
}
} else {
try {
const photoData = await cameraRef.takePictureAsync();
console.log('Photo taken:', photoData.uri);
setMsg('Photo taken: ', photoData.url)
} catch (error) {
setMsg('Error taking photo: ', error)
console.error('Error taking photo:', error);
}
}
}
};

if (!hasPermission) {
// Permissions are still loading or not granted
return (
<View style={styles.container}>
<Text>We need your permission to show the camera</Text>
<TouchableOpacity onPress={requestPermission}>
<Text>Grant Permission</Text>
</TouchableOpacity>
</View>
);
}

return (
<View style={styles.container}>
<CameraView
style={styles.camera}
facing={'back'}
ref={ref => setCameraRef(ref)}
mode={isVideo ? 'video' : 'picture'}
\>
<View style={styles.buttonContainer}>
<Text>{msg}</Text>
<TouchableOpacity style={styles.button} onPress={handleCapture}>
<Text style={styles.text}>
{isVideo ? (isRecording ? 'Stop Recording' : 'Record Video') : 'Take Photo'}
</Text>
</TouchableOpacity>
</View>
</CameraView>
</View>
);
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#000',
},
camera: {
flex: 1,
},
buttonContainer: {
flex: 1,
backgroundColor: 'transparent',
justifyContent: 'flex-end',
},
button: {
alignSelf: 'center',
backgroundColor: 'white',
padding: 10,
borderRadius: 5,
marginBottom: 20,
},
text: {
fontSize: 18,
color: '#000',
},
});

My camera page will just randomly become unresponsive when I navigate to it for no reason. The only fix is to navigate back and reopen the page until the buttons work again. This happens across both apps I’ve developed.

I’ve tried twice to just recreate the page, each time with less features, but it’s always the same result. Whether it’s a photo or a video does not matter. 50% of the time the button will work and will record a video or capture a photo, the other 50% of the time, the buttons are completely unresponsive. In my first and second attempts at the camera page, I had a TouchableWithoutFeedback, like this:

    <TouchableWithoutFeedback style={styles.focusableCameraArea} onPress={handleTapFocus}>
      <View style={styles.focusableCameraArea} />
    </TouchableWithoutFeedback>

where the handleTapFocus would log ‘tapped’ to the console (and show up as text on the screen when testing my native iOS build). Whenever the page was unresponsive, it wasn’t just the record button, but also my flip camera button, flash, and this touchable feedback that all just would not respond or give any feedback.

Note: The issue did not occur inside Expo or in my development build. Only after I built the app for iOS using EAS and submitted to Testflight to download did this issue occur. Also occurs in my other iOS app that’s on the App Store.

Table values ​are overlapping

I am developing a calendar for a school project, however I have a problem that I cannot solve and my searches were unsuccessful, when I generate the month and press to go to the next month the table overlaps causing a problem that makes subsequent months buggy .
There is my code in HTML and JavaScript

// Adds an event that triggers when the document content is fully loaded
document.addEventListener('DOMContentLoaded', function() {

  // Array containing the names of the months in Portuguese
  const monthsPt = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'];
  const tableDays = document.getElementById('dias'); // Gets the days table by ID

  // Function to generate the days of the calendar for a specific month and year
  function GetDaysCalendar(month, year) {
    // Updates the displayed month and year
    document.getElementById('mes').innerHTML = monthsPt[month];
    document.getElementById('ano').innerHTML = year;

    // Calculates the first day of the week of the month and the last day of the month
    let firstDayOfWeek = new Date(year, month, 1).getDay() - 1;
    let getLastDayThisMonth = new Date(year, month + 1, 0).getDate();


    // Loop to fill in the days of the table
    for (var i = -firstDayOfWeek, index = 0; i < (42 - firstDayOfWeek); i++, index++) {
      let dt = new Date(year, month, i); // Creates a date object for the current loop day
      let dtNow = new Date(); // Current date
      var dayTable = tableDays.getElementsByTagName('td')[index]; // Gets the corresponding table cell
      var today = new Date();
      var dd = String(today.getDate()).padStart(2, '0');
      var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!       
      let currentDay = parseInt(dd);
      let currentMounth = parseInt(mm) - 1;

      // Removes classes for previous month, next month, and current day
      dayTable.classList.remove('mes-anterior');
      dayTable.classList.remove('mes-proximo');
      dayTable.classList.remove('dia-atual');
      dayTable.innerHTML = dt.getDate(); // Sets the day number in the cell

      dayTable.addEventListener('click', function() {
        console.log("trivilin");
        console.log(dt.getDate());
        console.log(currentDay);
        console.log(dt.getMonth());
        console.log(currentMounth);

        if ((dt.getDate() >= currentDay && dt.getMonth() == currentMounth) || dt.getMonth() > currentMounth) {
          const modal = document.getElementById("ModalAceito");
          const span = document.getElementsByClassName("close")[0];

          modal.style.display = "block";

          span.onclick = function() {
            modal.style.display = "none";
          }

          window.onclick = function(event) {
            if (event.target == modal) {
              modal.style.display = "none";
            }
          }
        } else {
          const modall = document.getElementById("ModalError");
          const spann = document.getElementsByClassName("closeError")[0];

          modall.style.display = "block";

          spann.onclick = function() {
            modall.style.display = "none";
          }

          window.onclick = function(event) {
            if (event.target == modall) {
              modall.style.display = "none";
            }
          }

        }
      });


      // Checks if the current date matches the loop date
      if (dt.getFullYear() == dtNow.getFullYear() && dt.getMonth() == dtNow.getMonth() && dt.getDate() == dtNow.getDate()) {
        dayTable.classList.add('dia-atual'); // Adds the class for the current day
      }

      // Adds class for days from the previous month
      if (i < 1) {
        dayTable.classList.add('mes-anterior');
      }
      // Adds class for days from the next month
      if (i > getLastDayThisMonth) {
        dayTable.classList.add('mes-proximo');
      }

    }





  }

  // Gets the current date
  let now = new Date();
  let month = now.getMonth(); // Current month
  let year = now.getFullYear(); // Current year
  GetDaysCalendar(month, year); // Generates the calendar for the current month

  // Gets the buttons to navigate between months
  const buttonNext = document.getElementById('btn_prev');
  const buttonPrevious = document.getElementById('btn_ant');

  // Event for the next button
  buttonNext.onclick = function() {
    month++; // Advances to the next month
    if (month >= 12) { // If it exceeds December
      month = 0; // Reset to January
      year++; // Advance to the next year
    }
    GetDaysCalendar(month, year); // Updates the calendar
  }

  // Event for the previous button
  buttonPrevious.onclick = function() {
    month--; // Moves back to the previous month
    if (month < 0) { // If it goes below January
      month = 11; // Reset to December
      year--; // Move back to the previous year
    }
    GetDaysCalendar(month, year); // Updates the calendar
  }


});
<!-- Tells the browser which version of HTML is being used -->
<!DOCTYPE html>

<!-- Opening HTML, setting language to pt -->
<html lang="pt">

<!-- Opening the site header -->

<head>

  <meta charset="UTF-8">

  <!-- Import css style into html code -->
  <link rel="stylesheet" type="text/css" href="C:UsersAlunoDesktopPAPCssEstilo.css">

  <!-- Import code in JavaScript into html code -->
  <script type="text/javascript" src="C:UsersAlunoDesktopPAPScriptScript.js"></script>

  <!-- Sets the site title for Registo de Salas -->
  <title> Registo de Salas </title>

  <!-- Site Header Closing -->
</head>

<!-- Opening of the website body -->

<body>

  <!-- Creating a title at the beginning of the site with the name "Registo de Salas" -->
  <h1> Registo de Salas </h1>


  <!-- Creating a div and defining it as a class called Conteudo -->
  <div class="Conteudo">

    <!-- Creating a div and defining it with a class name called "Calendario"-->
    <div class="Calendario">

      <!-- Opening header-->
      <header>

        <!-- Creating a subtitle and defining its id for mes -->
        <h2 id="mes">Abril</h2>

        <!-- Creating a link and naming it as the class btn-ant with the id btn_prev -->
        <a class="btn-ant" id="btn_ant">
          <</a>

            <!-- Creating a link and naming it as the class btn-pro with the id btn_next -->
            <a class="btn-pro" id="btn_prev">></a>

            <!-- Header closing -->
      </header>

      <!-- Creating a table to form the calendar -->
      <!-- I made this table based on what I know about HTML at the moment, if this becomes a used project it can implement a more efficient method, and I apologize for the confusion that follows, I'm really improvising in this part.-->
      <table>

        <!-- Opens the table head -->
        <thead>

          <!-- Creating a row in the table -->
          <tr>
            <!-- This part of the code serves to make the days of the week appear at the top of the calendar, if someone changes this it may have to be changed in the page index. -->
            <td>Dom</td>
            <td>Seg</td>
            <td>Ter</td>
            <td>Qua</td>
            <td>Qui</td>
            <td>Sex</td>
            <td>Sab</td>

            <!-- Closes the table row -->
          </tr>

          <!-- Closes the table head -->
        </thead>

        <!-- Creating the table body and placing its id as dias -->
        <tbody id="dias">

          <!-- The lines of code below only serve to load the calendar lines and create their respective spaces, the days are replaced by the code made in javaScript -->
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
          </tr>

          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
          </tr>

          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
          </tr>

          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
          </tr>

          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
          </tr>

          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
          </tr>



          <!-- Closing the table body -->
        </tbody>

        <!-- Table closing -->
      </table>

      <!-- Foother opening -->
      <footer>
        <!-- Using the h2 tag to place the year, its year id is due to the fact that it is easier to replace it in JavaScript -->
        <h2 id="ano">2020</h2>

        <!-- Footer closing -->
      </footer>
      <!-- Estrutura do Modal -->
      <div id="ModalAceito" class="modal">
        <div class="modal-content">
          <table>
            <span class="close">&times;</span>
            <td> Sala tic 1</td>
          </table>
        </div>
      </div>

      <div id="ModalError" class="modal">
        <div class="modal-content">
          <span class="closeError">&times;</span>
          <h1> Impossivel fazer marcação</h1>
        </div>

      </div>

      <!-- Closing of the div -->
    </div>


    <!-- Closing of the div -->
  </div>

  <!-- Closing the body of the site -->
</body>



<!-- HTML closing -->

</html>

I already tried asking my teachers and looked where I found something about it.

the clean up function of the Ref callback is not executed

Here in my React the clean up function is not executed when re-rendering:

import React, { useRef, useState } from 'react';

export default function App() {
  const [x, setX] = useState(2);
  const d = useRef(null);

  return (
    <>
      <p ref={(node) => {
        console.log('start');
        return () => {
          console.log('finish');
        };
      }}>{x}</p>
      <button onClick={() => setX(x + 1)}>hello</button>
    </>
  );
}

i want my clean up function to be executed when the ref callback is updated hence here the callback is created every render then the clean up must be executed every render!

Keep element in scroll view while animating open

I have an accordion-type component at the bottom of a scrollable container. When the accordion opens, it ends up just overflowing behind the scroll region. I’m trying to get the expanded contents to remain within view while opening. Because it animates open over time, simply setting the scroll position on-trigger doesn’t work. Another option is delaying the scroll until it’s fully open but this is a clunky experience. What are the solutions to this problem?