Skip to content

Autocomplete for new organisation#1501

Open
Paperyduke6 wants to merge 3 commits intozulip:mainfrom
Paperyduke6:autocomplete-for-new-organisation
Open

Autocomplete for new organisation#1501
Paperyduke6 wants to merge 3 commits intozulip:mainfrom
Paperyduke6:autocomplete-for-new-organisation

Conversation

@Paperyduke6
Copy link

Fixes #1012

Autocomplete to the Organisation URL input and adds inline ghost-text to show the behaviour visually while typing.

Problem
Typing myteam and hitting Connect now resolves to https://myteam instead of https://myteam.zulipchat.com. it should be shown to the user within the input field before they submit.

Changes Made
HTML (new-server-form.ts)

Restored the autoComplete function — bare subdomains are expanded to https://.zulipchat.com on submit, anything containing a dot, slash, or protocol is passed through untouched
Wrapped the inside a styled to look like the input box to allow the ghost suffix to sit inline with the typed text
Added a ghost suffix that displays .zulipchat.com directly after the cursor when a bare subdomain is detected, giving the user a preview before hitting Connect
Added an invisible measuring that mirrors the typed text so its pixel width can be read and applied to the input, keeping the suffix flush against the last character

CSS (preferences.css)

Added label#new-server-url-label:focus-within alongside the existing .setting-input-value:focus rule so the teal focus border fires correctly through the label wrapper
Added width: 100% as the default on #new-server-url-input so the placeholder renders in full, with JS overriding this to a pixel value only while the suffix is visible
All new rules are scoped to four unique IDs (#new-server-url-label, #new-server-url-input, #new-server-url-domain, #new-server-url-size-calc) so there is zero risk of affecting any other input or form in the preferences component

Testing

Verified myteam now correctly resolves to https://myteam.zulipchat.com on submit
Tested with full URLs, self-hosted domains, and explicit http:// to confirm they are passed through untouched

Screen Capture

Autofill.for.new.org.mp4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

add organization: url: attempt to autocomplete with zulipchat.com

2 participants