Overview

In this challenge, you will build a simple “Issue Creator” modal. The goal is to demonstrate how refs can be used to control focus in a component that is conditionally rendered.

The challenge focuses on understanding how refs are passed and used across components in a React 19-style API, without relying on forwardRef.

Requirements

• Clicking the “Add issue” button must render the IssueModal.
• When the modal opens, the <textarea> inside it must automatically receive focus.
• Clicking Cancel must close the modal.
• Clicking Create must also close the modal.
• The solution must not use forwardRef.

Notes

• The challenge focuses on understanding how refs are passed and used across components in a React 19-style API, without relying on forwardRef.
• Create the ref in the parent and pass it directly to the IssueModal component.
• The ref must point to the <textarea> element inside the modal.
• Focus should be handled from the parent when the modal becomes visible.
• Use IssueModalPre19 as a reference to understand the previous implementation pattern with forwardRef.

Tests

1. renders the app title
2. focuses the issue textarea when opening the modal
3. opens the modal when clicking 'add issue'
4. close the when clicking cancel
5. close the modal when clicking cancel