Re: [Django] #36336: Incorrect size of first autocomple in Inlines with "collapse" class (on chromium based browsers?)

[Django]

#36336: Incorrect size of first autocomple in Inlines with "collapse" class (on
chromium based browsers?)
-------------------------------------+-------------------------------------
Reporter: Michał Pokusa | Owner: (none)
Type: Bug | Status: new
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: autocomplete | Triage Stage: Accepted
collapse size inline |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Comment (by Jan Tumpa):

The "show and hide" fix to this is also discouraged by jQuery for good
reason. It's a negative for UX and performance.





"jQuery will attempt to temporarily show and then re-hide an element in
order to measure its dimensions, but this is unreliable and (even when
accurate) can significantly impact page performance. This show-and-rehide
measurement feature may be removed in a future version of jQuery."


Additionally, while the support for the "open" class would be a nice
addition, it still doesn't fix the underlying issue with this.

I agree this is most likely an issue with `Element.outerWidth()`.
--
Ticket URL: <https://code.djangoproject.com/ticket/36336#comment:7>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.

[Django]

#36336: Incorrect size of first autocomple in Inlines with "collapse" class (on
chromium based browsers?)
-------------------------------------+-------------------------------------
Reporter: Michał Pokusa | Owner: (none)
Type: Bug | Status: new
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: autocomplete | Triage Stage: Accepted
collapse size inline |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------

Changes (by Jan Tumpa):

* cc: Jan Tumpa (added)

--
Ticket URL: <https://code.djangoproject.com/ticket/36336#comment:8>

[Django]

#36336: Incorrect size of first autocomple in Inlines with "collapse" class (on
chromium based browsers?)
-------------------------------------+-------------------------------------
Reporter: Michał Pokusa | Owner: (none)
Type: Bug | Status: new
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: autocomplete | Triage Stage: Accepted
collapse size inline |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------

Comment (by Michał Pokusa):

I think I need to clarify what I meant.

Yes, the jQuery docs state that the `Element.outerWidth()` will do the
show/hide thing on its own, but** it is not the solution I am talking
about here.** Therefore the limitations they mention also would not apply.

My proposed solution is to **render the details tag open from the start**,
then the autocomplete widget would initialize, and because the element
that the `outerWidth()` will operate on will be visible at this moment,
the width will be calculated correctly. Only after that, if the `"open"`
class is not present, JS would "manually" close details tags.

So, the problem will be solved, and it will not depend on the jQuery
itself, but on the order of operations. The main reason for going this way
is in my opinion, that until the Django 5.1 this is exactly how
collapsible fieldsets/inlines worked, although it was the div that was
being closed and not the details tag, but the principle stays the same.
--
Ticket URL: <https://code.djangoproject.com/ticket/36336#comment:9>

[Django]

#36336: Incorrect size of first autocomple in Inlines with "collapse" class (on
chromium based browsers?)
-------------------------------------+-------------------------------------
Reporter: Michał Pokusa | Owner: (none)
Type: Bug | Status: new
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: autocomplete | Triage Stage: Accepted
collapse size inline |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------

Comment (by Jan Tumpa):

Apologies, I misunderstood what you were proposing as a solution.

On another note, your proposed solution would still cause a flicker, are
we okay with that being the solution is the question.

In my opinion, having that flicker would be a better alternative to the
current issue since currently, that field is basically unusable.
--
Ticket URL: <https://code.djangoproject.com/ticket/36336#comment:10>

[Django]

#36336: Incorrect size of first autocomple in Inlines with "collapse" class (on
chromium based browsers?)
-------------------------------------+-------------------------------------
Reporter: Michał Pokusa | Owner: (none)
Type: Bug | Status: new
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: autocomplete | Triage Stage: Accepted
collapse size inline |

Has patch: 1 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------

Changes (by yassershkeir):

* cc: yassershkeir (added)
* has_patch: 0 => 1

--
Ticket URL: <https://code.djangoproject.com/ticket/36336#comment:11>

[Django]

#36336: Incorrect size of first autocomple in Inlines with "collapse" class (on
chromium based browsers?)
-------------------------------------+-------------------------------------
Reporter: Michał Pokusa | Owner: (none)
Type: Bug | Status: new
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: autocomplete | Triage Stage: Accepted
collapse size inline |
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------

Comment (by yassershkeir):

Hello, I created a fix based on the comments (thanks <3)
Feel free to check out the PR: https://github.com/django/django/pull/19601
--
Ticket URL: <https://code.djangoproject.com/ticket/36336#comment:12>

[Django]

#36336: Incorrect size of first autocomple in Inlines with "collapse" class (on
chromium based browsers?)
-------------------------------------+-------------------------------------
Reporter: Michał Pokusa | Owner:

| yassershkeir
Type: Bug | Status: assigned

Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: autocomplete | Triage Stage: Accepted
collapse size inline |
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------

Changes (by Antoliny):

* owner: (none) => yassershkeir
* status: new => assigned

--
Ticket URL: <https://code.djangoproject.com/ticket/36336#comment:13>

[Django]

#36336: Incorrect size of first autocomple in Inlines with "collapse" class (on
chromium based browsers?)
-------------------------------------+-------------------------------------
Reporter: Michał Pokusa | Owner:
| yassershkeir
Type: Bug | Status: assigned
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: autocomplete | Triage Stage: Accepted
collapse size inline |
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------

Comment (by Michał Pokusa):

It is worth noting that it is possible to replicate this problem without
inlines, as it is also present when there is an autocomplete-enabled field
inside a collapsible fieldset, which might be a more common scenario that
the one I initially provided with inlines.
--
Ticket URL: <https://code.djangoproject.com/ticket/36336#comment:14>

[Django]

#36336: Incorrect size of first autocomple in Inlines with "collapse" class (on
chromium based browsers?)
-------------------------------------+-------------------------------------
Reporter: Michał Pokusa | Owner:
| yassershkeir
Type: Bug | Status: assigned
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: autocomplete | Triage Stage: Accepted
collapse size inline |
Has patch: 1 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 1

Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------

Changes (by Sarah Boyce):

* needs_better_patch: 0 => 1

--
Ticket URL: <https://code.djangoproject.com/ticket/36336#comment:15>