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

[MdTabs] height race condition #1768

Closed
zevdg opened this issue May 21, 2018 · 3 comments · Fixed by #1770
Closed

[MdTabs] height race condition #1768

zevdg opened this issue May 21, 2018 · 3 comments · Fixed by #1770
Labels

Comments

@zevdg
Copy link
Contributor

zevdg commented May 21, 2018

Steps to reproduce

asynchronously update content of an md-tab shortly after creating it

Which browser?

at least chrome
vue-material 1.0.0-beta-10.2

What is expected?

tab height should grow to fill content no matter when the content is loaded

What is actually happening?

the md-tabs-content container may or may not grow to fit the tab content depending on when the content was loaded

synchronous loading works as expected, and very slow loading also works as expected
the trouble is with relatively quick asynchronous loads. On my setup, the race seems to be happening about 125 miliseconds after the creation event is fired in the reproduction link below (may be different on your machine). When I try to change the content of the tab between 1-120ms after the creation event, the container does not grow to show the new content.

possibly related to #1761

Reproduction Link

https://codesandbox.io/s/9z10nzp324
switch between the various commented out create events to see expected vs actual behavior

@zevdg
Copy link
Contributor Author

zevdg commented May 21, 2018

uploading an image of the unexpected behavior just in case you cannot reproduce on your machine.
broken

@zevdg
Copy link
Contributor Author

zevdg commented May 21, 2018

I'm currently working around this in my project by adding

window.setTimeout(() => {
	window.dispatchEvent(new Event("resize"));
}, 100);

after my async load completes.

@VdustR VdustR changed the title md-tab height race condition [MdTabs] height race condition May 21, 2018
@VdustR VdustR added the bug label May 21, 2018
@VdustR
Copy link
Member

VdustR commented May 22, 2018

Tabs do not watch content mutation yet. update: setup observer 100ms after mounted

You can re-calculate it manually temporary for now.

<template>
  ...
  <md-tabs ref="tabs">
  ...
</template>
<script>
export default {
  ...
  created() {
    // fast asyc load
    // always fails on my machine
    window.setTimeout(async () => {
      this.loadItems()
      await this.$nextTick()
      this.$refs.tabs.calculateTabPos()
    }, 1)
  },
  ...
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
2 participants