Skip to content
This repository has been archived by the owner on Mar 4, 2020. It is now read-only.

fix(Chat): positiong fixes for actions #2300

Merged
merged 5 commits into from
Jan 31, 2020
Merged

Conversation

layershifter
Copy link
Member

@layershifter layershifter commented Jan 31, 2020

Fixes #2299.

@DustyTheBot
Copy link
Collaborator

DustyTheBot commented Jan 31, 2020

Perf comparison

Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.71 0.48 1.48:1 2000 1414
🔧 Button.Fluent 1.73 0.26 6.65:1 1000 1734
🔧 Checkbox.Fluent 1.83 0.36 5.08:1 1000 1833
🔧 Dialog.Fluent 0.41 0.19 2.16:1 5000 2057
🔧 Dropdown.Fluent 4.38 0.4 10.95:1 1000 4375
🔧 Icon.Fluent 0.28 0.04 7:1 5000 1390
🔧 Image.Fluent 0.12 0.09 1.33:1 5000 581
🔧 Slider.Fluent 2.16 0.31 6.97:1 1000 2156
🦄 Text.Fluent 0.06 0.19 0.32:1 5000 307
🦄 Tooltip.Fluent 0.38 19.45 0.02:1 5000 1916

🔧 Needs work     🎯 On target     🦄 Amazing

Generated by 🚫 dangerJS

builder => builder.hover(selectors.message).snapshot('Hovers the first message'),
builder => builder.click(selectors.message).snapshot('Focus the first message via mouse click'),
(builder, keys) =>
builder.keys('body', keys.tab).snapshot('Focuses the first message via keyboard'),
Copy link
Member

Choose a reason for hiding this comment

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

nit: technically, this does not select the first message

Copy link
Member Author

Choose a reason for hiding this comment

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

Good catch, renamed this step

@layershifter layershifter added 🚀 ready for review 🧰 fix Introduces fix for broken behavior. labels Jan 31, 2020
*/
unstable_pinned && { flip: { enabled: false } },
),
[hasScrollableElement, position, offset, rtl, unstable_pinned, userModifiers],
Copy link
Member Author

Choose a reason for hiding this comment

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

We have userModifiers as dependency there as they are an object, to avoid recreation of Popper on each render I decided to use there deep memo strategy.


return <Ref innerRef={contentRef}>{React.Children.only(child) as React.ReactElement}</Ref>
return <Ref innerRef={contentRef}>{React.Children.only(child)}</Ref>
Copy link
Member Author

Choose a reason for hiding this comment

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

Small type improvements there as in real world we allow to pass only React.ReactElement (forced via React.Children.only())

const scrollParentElement = getScrollParent(contentRef.current)

return scrollParentElement !== scrollParentElement.ownerDocument.body
}, [contentRef])
Copy link
Member

Choose a reason for hiding this comment

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

I don't think that using Ref as useMemo dependency works.

Copy link
Member Author

Choose a reason for hiding this comment

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

As discussed in offline added a comment there.

@layershifter layershifter merged commit b7980fc into master Jan 31, 2020
@layershifter layershifter deleted the fix/chat-actions branch January 31, 2020 15:42
miroslavstastny pushed a commit that referenced this pull request Feb 3, 2020
* fix(Chat): positiong fixes for actions

* add changelog entry

* update screener steps

* revert change, add comment

(cherry picked from commit b7980fc)
@miroslavstastny miroslavstastny mentioned this pull request Feb 3, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
🧰 fix Introduces fix for broken behavior. 🚀 ready for review
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Chat: positioning is broken on focus
4 participants