Hello!! 👋

This week, I contributed to Impress, a document-editing app, where I worked on a bug related to how users interact with placeholder text in the title field (Issue #328). Here’s a breakdown of the intended functionality, the specific issue, and the steps I took to resolve it.

Expected Behavior

In Impress, the document title field has specific styling to guide users. When the title text is grey, it serves as a placeholder ("Untitled Document"). Once the user edits the title, it should turn black, indicating the update has been successfully saved. The expected behavior is:

• Clicking on the placeholder text should activate the text box for editing.
• If the title remains unedited, the grey placeholder should persist.
• If the title is edited, the new text should display in black.

Actual Behavior

While the title update generally worked, a bug appeared when users selected and edited the placeholder text in certain ways. If users highlighted the placeholder text by double-clicking or dragged the mouse outside the text box area, they could end up modifying the placeholder text instead of starting with a blank title.

In these scenarios:

1. The placeholder text could be altered while still appearing grey.
2. After confirming the edit (e.g., by clicking elsewhere or pressing Enter), a success notification would appear, yet the title remained grey, as if it were still the default placeholder, instead of becoming black.

Problem Analysis

In Impress’s DocTitle.tsx, I discovered that handleTitleSubmit was not correctly updating the titleDisplay state when users edited the placeholder text. As a result, the isUntitled flag remained true, keeping the title styled in grey even after an edit.

Solution

To fix this, I modified handleTitleSubmit to ensure it updated both updateDoc with the new title and titleDisplay with the edited value. This change updated the isUntitled flag to false, allowing the title to display in black once edited, providing the user with immediate visual confirmation.

With this approach, the title now correctly turns black after any edits, enhancing the user experience by signaling that their updates have been successfully applied (PR #370).

Challenges

This task presented several challenges:

1. Code Familiarity: A significant amount of time went into understanding the codebase and setting up the project’s frontend and backend for local development. Grasping the relationships between different components was key to diagnosing the issue effectively.

2. Exploring Alternatives: My initial solution focused on preventing interactions like double-clicking or dragging on the placeholder text. However, this approach introduced additional bugs and felt like a "band-aid" solution. Refocusing on handleTitleSubmit led to a more sustainable fix.

3. Pull Request Requirements: During the pull request process, several CI tests failed:

   • A CHANGELOG.md entry was required to document the fix, but this wasn’t mentioned in CONTRIBUTING.md, so I initially missed it.
   • My commit message format didn’t align with the project’s CI standards.

I addressed these issues in a subsequent commit by adding the required change log entry and reformatting my commit message to match the guidelines.

Reflections

Working on Impress has been a rewarding experience, reinforcing the value of thorough code understanding and the impact of thoughtful, comprehensive solutions. Hacktoberfest continues to be a fantastic opportunity for growth, and I look forward to more contributions this month!