Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: stop rendering the completion popup disconnected from the editor for long ghost text #5401

Merged
merged 7 commits into from
Nov 30, 2023

Conversation

akoreman
Copy link
Contributor

Issue #, if available: NA

Description of changes: Currently, when ghost text extends beyond the border of the editor, the autocomplete popup can be rendered disconnected from the editor:

Screen.Recording.2023-11-26.at.22.47.35.mov

This changes this so that it will be rendered below, but still connected to, the editor at the lowest:

Screen.Recording.2023-11-26.at.22.48.38.mov

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

@akoreman akoreman changed the title Popup anchor fix: stop rendering the completion popup disconnected from the editor for long ghost text Nov 27, 2023
Copy link

codecov bot commented Nov 27, 2023

Codecov Report

Attention: 1 lines in your changes are missing coverage. Please review.

Comparison is base (b0ee067) 87.54% compared to head (a8f729b) 86.87%.

Files Patch % Lines
src/autocomplete.js 80.00% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##           master    #5401      +/-   ##
==========================================
- Coverage   87.54%   86.87%   -0.68%     
==========================================
  Files         583      583              
  Lines       46253    45775     -478     
  Branches     7003     6997       -6     
==========================================
- Hits        40493    39766     -727     
- Misses       5760     6009     +249     
Flag Coverage Δ
unittests 86.87% <97.50%> (-0.68%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

// In this case, we want to render the popup such that the top aligns with the bottom of the editor.
var editorContainerBottom = editor.container.getBoundingClientRect().bottom - lineHeight;
var lowestPosition = editorContainerBottom < posGhostText.top ?
{top: editorContainerBottom, left: posGhostText.left} :
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"Added line #L238 was not covered by tests"

But you have a test that tests these changes, in particular it tests whether "Popup should start one pixel below the bottom of the editor".

Do you think it would be valuable to also test the other edge case in your test?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you mean the edge case where the popup is within the editor and should therefore be rendered at the bottom of the ghost text?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1 to adding test for checking popup position at the bottom of ghost text if it is inside the editor

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

added an extra test to the PR

@akoreman akoreman merged commit 94d68a7 into ajaxorg:master Nov 30, 2023
2 of 3 checks passed
@akoreman akoreman deleted the popup_anchor branch November 30, 2023 13:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants