Skip to content

onremove fails with nested component children when the view return false #1921

Closed
@octavore

Description

@octavore

When a component receives class components as children but returns nothing in its view, onremove will try to call onremove on the children but fails because the children were never initialized. This does not happen if the component returns a vnode because in this case there is a check for vnode.instance that avoids the loop.

Expected Behavior

When navigating, onremove should not try to invoke the onremove handler of undefined _state.

Current Behavior

Appears to silently fail to change the dom.

Possible Solution

Maybe add a check that vnode._state is defined here?

Steps to Reproduce

// component which fails to be removed
class GrandchildComponent {
  view() {
    return m('div', 'hello')
  }
}

// if this component returns a vnode, the bug does not happen
class ChildComponent {
  view(v) {
    return;
  }
}

// setup for testing: click the link to trigger navigation, which fails due to the bug
class ParentComponent {
  view() {
    return [
      m('div', m('a', { href: '/b', oncreate: m.route.link }, 'next')),
      m(ChildComponent, {}, m('div', m(GrandchildComponent)))
    ]
  }
}

var root = document.getElementById("app");
m.route(root, '/', {
  '/': ParentComponent,
  '/b': { view: () => m('div', 'world')}
})

Context

The situation where I encountered this bug was with a Popover component where the parent could specify the visibility (as a boolean attribute) and children of the Popover, and if the visibility was false the view would simply return nothing. However, child components which were classes would subsequently fail onremove when navigating to a different URL.

Your Environment

  • Version used: 1.1.3 and 1da69da
  • Browser Name and version: Safari 10.1.1, Chrome 60
  • Operating System and version (desktop or mobile): MacOS 10.12.5
  • Link to your project: https://github.com/ketchuphq/ketchup

Activity

added
Type: BugFor bugs and any other unexpected breakage
on Jul 31, 2017
pygy

pygy commented on Jul 31, 2017

@pygy
Member

@octavore thanks for the report, you're right, we should not iterate over the children of components, not matter what the view returns

changed the title [-]onremove fails with nested class component children[/-] [+]onremove fails with nested component children when the view return false[/+] on Jul 31, 2017
added a commit that references this issue on Jul 31, 2017
c96e085
added a commit that references this issue on Jul 31, 2017

Merge pull request #1922 from pygy/fix-1921

157fb7d
pygy

pygy commented on Jul 31, 2017

@pygy
Member

It was merged into next ideally it should also be cherry picked for a v1.1.x release

added 2 commits that reference this issue on Jul 31, 2017

Move the MithrilJS#1921/MithrilJS#1922 line into the v1.1.4 change set

Merge pull request #1923 from pygy/fix-change-log

added a commit that references this issue on Nov 29, 2017
b38367a
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type: BugFor bugs and any other unexpected breakage

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @pygy@octavore

        Issue actions

          onremove fails with nested component children when the view return false · Issue #1921 · MithrilJS/mithril.js