Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

hidden="until-found" がAstro/Reactコンポーネントのスプレッドで値が落ちる

Open
#56 4 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
42/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
react, typescript
Domain
frontend

Research direction

Read Lism.astro and setAccordion.js, then trace how hidden="until-found" passes through the component prop spread and how ACCORDION_HIDDEN_VALUE is obtained. Reproduce the static and spread cases described in the issue; done means the rendered attribute retains "until-found" and accordion interactions do not replace it with an empty value.

Written by the indexing model from the issue text.

Description

wontfix 外部依存

概要

Lismコンポーネントに hidden="until-found" を渡すと、出力されるHTMLでは値が落ちて単なる hidden になってしまう。

原因

Astroのランタイム(render/util.ts)が hidden をboolean属性として扱っているため、{...props} でスプレッドする際に文字列値が無視され、truthy → hidden(値なし)に変換される。

  • 静的HTML: <div hidden="until-found"> → そのまま出力される(OK)
  • 動的スプレッド: <div {...{hidden: "until-found"}}> → <div hidden> になる(NG)

Lismコンポーネントは内部で <JSX {...getLismProps(props)}> とスプレッドしているため、後者のパターンに該当する。

getLismProps 自体は hidden: "until-found" を正しくパススルーしており、Lism側のprop処理には問題ない。

参考: React 18でも同様の問題がある(React 19で修正済み)
https://github.com/facebook/react/issues/24740

影響

  • Accordionパネルなど hidden="until-found" を使用するコンポーネントで、ブラウザのページ内検索(Find in Page)が正しく動作しない
  • setAccordion.js で初期値を getAttribute('hidden') で取得する処理にも波及し、JS側の開閉後も hidden="" になってしまう(デフォルトの 'until-found' が空文字で上書きされる)

対応案

  • Lism.astro で hidden を特別扱いし、スプレッドではなく直接属性として出力する方法を検討
  • setAccordion.js の ACCORDION_HIDDEN_VALUE 取得ロジックで空文字の場合にデフォルト値を維持する修正
Dominant language
TypeScript
Stars
283
Forks
8
Avg merge
6h 37m
Merged PRs (30d)
15

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from lism-css/core

All issues in lism-css/core

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.