api-platform / api-platform/create-client

Next.js: Form component for input type="checkbox" not working and type error

Open
#371 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
376
Forks
132
PR merge metrics
No merged PRs in 30d

Description

**create-client version(s) affected**: 0.10.0

**Description**

After generating an app in the pwa container derived from the standard distribution the onInvoice checkbox in the hours Form does not work and when running
```shell
docker compose exec pwa pnpm next build
```
i get the following type error:
./components/hours/Form.tsx values.onInvoice Type 'boolean | ""' is not assignable to type 'string | number | readonly string[] | undefined'.

This happens because templates/next/components/foo/Form.tsx for input type="checkbox" uses 164-165:
```javascript tsx
{{#compare type "!=" "dateTime" }}
value={values.{{name}} ?? ""}
```

At first sight is may seem strange that an input wiht type="checkbox" does not accept booleans. But if you correct the type passed to value= and test the input you will see that the checkbox never gets checked.

**How to reproduce**

Clone MetaClass' Tutorial Api Platform repository using git:
```shell
git clone https://github.com/metaclass-nl/tutorial-api-platform.git
```

check out branch chapter2-next

start the containers with
```shell
docker compose up
```

The api container should execute the data base migrations automatically. If not do:
```shell
docker compose exec php ./bin/console doctrine:migrations:migrate
```

To clear the database and execute the fixtures enter the following command:
```shell
docker compose exec php bin/console doctrine:fixtures:load
```

Follow the instructions from readme.md. or point your browser to the [same branch on github](https://github.com/metaclass-nl/tutorial-api-platform/tree/chapter2-next)
and follow the instructions.

The paragraph "Checking types" describes how to reprocude this error as well as serveral others for wich seperate issues exist/will be created.

**Possible Solution**

What helps is to replace in the generated code:
```javascript tsx
value={values.onInvoice ?? ""}
```
by
```javascript tsx
checked={values.onInvoice}
```
Then the checkbox should be checked if onInvoice is true.

I guess the template needs an other {{#compare type "=" "checkbox" }} to handle this case.

**Additional Context**
Api Platform version v3.1.3
typescript config see [pnpm-lock.yaml](https://github.com/metaclass-nl/tutorial-api-platform/blob/chapter2-next/pwa/pnpm-lock.yaml) and [tsconfig.json](https://github.com/metaclass-nl/tutorial-api-platform/blob/chapter2-next/pwa/tsconfig.json)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.