fix: Create a Keyboard in Application

[willeastcott]

<Application> creates the mouse and touch devices but no keyboard, and keyboard is one of its excluded props, so app.keyboard is always null in a React app. The User Manual relies on it: the React tab of Moving Bodies in the Physics chapter calls app.keyboard.isPressed(KEY_RIGHT) in a useAppEvent('update', ...) handler to push a rigid body, and throws as soon as that handler runs.

This creates a Keyboard attached to window along with the application, as the Editor's launcher and the Web Components <pc-app> do, so key presses register without the canvas having focus. It has the default options, so it doesn't call preventDefault() or stopPropagation(), and typing in page inputs and keyboard scrolling are unaffected. As with <pc-app>, it also sees keys typed into page inputs, since those events bubble to the window.

Unmounting needs no new cleanup: app.destroy() already runs then, and it detaches the keyboard and sets app.keyboard back to null. The keyboard is created after the existing check for a mount torn down while the graphics device was being created. So StrictMode's double mount leaves one keyboard attached whichever way its first mount ends: under the tests' act() it's abandoned before creating an application, and in a browser its application is created and then destroyed along with its keyboard.

Checked in Chromium with engine 2.11.8 (the lockfile's version), WebGL2 and StrictMode, using the Moving Bodies Push component as published on a dynamic box: holding the right arrow pushes the box, key presses register while focus is on the page body rather than the canvas, and after an unmount and remount exactly one keyboard is attached. The engine's main handles the keyboard in AppBase the same way.

The tests are in a new file, Application.keyboard.test.tsx, since they run against the real engine (vi.unmock('playcanvas')). The shared mock in test/setup.ts builds a stand-in application with its own input devices, so it never sees the keyboard the component creates. The tests check that app.keyboard tracks key presses on window, and that under StrictMode only the application's keyboard stays attached, and is detached on unmount. Both fail without the fix. The StrictMode test also fails if the keyboard is created before the graphics device is awaited.

#353 (the ElementInput) changes the same Application options, and also Application.test.tsx and test/setup.ts. This PR avoids the lines #353 changes, so the two merge cleanly in either order: git merge-tree against its head (503f52e) finds no conflicts, and the combined tree passes lint and all tests, #353's new test included. With both merged, the devices are created as elementInput, mouse, touch, keyboard. The keyboard's place in that order doesn't matter, since the element input and mouse don't listen for key events.

A changeset is included (patch).

🤖 Generated with Claude Code

[changeset-bot]

🦋 Changeset detected

Latest commit: f0d9602

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@playcanvas/react	Patch
@playcanvas/blocks	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@playcanvas/blocks@358

npm i https://pkg.pr.new/@playcanvas/react@358

commit: f0d9602