Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

<select> elements aren't selecting a matching value after update

See original GitHub issue

preact version: 7.1.0

Update: I created a Codepen demo showing the behavior.

I have a component that renders three <select> elements representing a users Google Analytics account tree structure (accounts > properties > views). When the selected account is updated, the property and view <select>s should update accordingly, but in many cases an empty select is displayed. (Note the empty select is never displayed on the initial render, only after user updates).

Steps to reproduce:

Include the ViewSelector component code at the bottom of this issue in a Preact app.
Once the page loads, the ViewSelector renders with “Account A” selected
Select “Account C” then select “Account B”
Notice how once “Account B” is selected, the property and view <select>s aren’t being populated.

Note: the code works in React as well as Preact-compat.

import {h, Component} from 'preact';

const accountSummaries = {
  "kind": "analytics#accountSummaries",
  "username": "joe@gmail.com",
  "totalResults": 5,
  "startIndex": 1,
  "itemsPerPage": 1000,
  "items": [
    {
      "id": "1001",
      "kind": "analytics#accountSummary",
      "name": "Account A",
      "webProperties": [
        {
          "kind": "analytics#webPropertySummary",
          "id": "UA-1001-1",
          "name": "WebProperty A.A",
          "internalWebPropertyId": "3001",
          "level": "STANDARD",
          "websiteUrl": "http://example.com",
          "profiles": [
            {
              "kind": "analytics#profileSummary",
              "id": "2001",
              "name": "Profile A.A.A",
              "type": "WEB"
            },
            {
              "kind": "analytics#profileSummary",
              "id": "2002",
              "name": "Profile A.A.B",
              "type": "WEB"
            },
            {
              "kind": "analytics#profileSummary",
              "id": "2003",
              "name": "Profile A.A.C",
              "type": "WEB"
            }
          ]
        },
        {
          "kind": "analytics#webPropertySummary",
          "id": "UA-1001-2",
          "name": "WebProperty A.B",
          "internalWebPropertyId": "3002",
          "level": "STANDARD",
          "websiteUrl": "http://example.com",
          "profiles": [
            {
              "kind": "analytics#profileSummary",
              "id": "2004",
              "name": "Profile A.B.A",
              "type": "WEB"
            },
            {
              "kind": "analytics#profileSummary",
              "id": "2005",
              "name": "Profile A.B.B",
              "type": "WEB"
            },
            {
              "kind": "analytics#profileSummary",
              "id": "2006",
              "name": "Profile A.B.C",
              "type": "WEB"
            }
          ]
        },
        {
          "kind": "analytics#webPropertySummary",
          "id": "UA-1001-3",
          "name": "WebProperty A.C",
          "internalWebPropertyId": "3003",
          "level": "STANDARD",
          "websiteUrl": "http://example.com",
          "profiles": [
            {
              "kind": "analytics#profileSummary",
              "id": "2007",
              "name": "Profile A.C.A",
              "type": "WEB"
            },
            {
              "kind": "analytics#profileSummary",
              "id": "2008",
              "name": "Profile A.C.B",
              "type": "WEB"
            },
            {
              "kind": "analytics#profileSummary",
              "id": "2009",
              "name": "Profile A.C.C",
              "type": "WEB"
            }
          ]
        }
      ]
    },
    {
      "id": "1002",
      "kind": "analytics#accountSummary",
      "name": "Account B",
      "webProperties": [
        {
          "kind": "analytics#webPropertySummary",
          "id": "UA-1002-1",
          "name": "WebProperty B.A",
          "internalWebPropertyId": "3002",
          "level": "STANDARD",
          "websiteUrl": "http://example.com",
          "profiles": [
            {
              "kind": "analytics#profileSummary",
              "id": "2010",
              "name": "Profile B.A.A",
              "type": "WEB"
            }
          ]
        }
      ]
    },
    {
      "id": "1003",
      "kind": "analytics#accountSummary",
      "name": "Account C",
      "webProperties": [
        {
          "kind": "analytics#webPropertySummary",
          "id": "UA-1003-1",
          "name": "WebProperty C.A",
          "internalWebPropertyId": "3003",
          "level": "STANDARD",
          "websiteUrl": "http://example.com",
          "profiles": [
            {
              "kind": "analytics#profileSummary",
              "id": "2011",
              "name": "Profile C.A.A",
              "type": "WEB"
            }
          ]
        }
      ]
    },
    {
      "id": "1004",
      "kind": "analytics#accountSummary",
      "name": "Account D (Property-less)"
    },
    {
      "id": "1005",
      "kind": "analytics#accountSummary",
      "name": "Account E (View-less)",
      "webProperties": [
        {
          "kind": "analytics#webPropertySummary",
          "id": "UA-1005-1",
          "name": "WebProperty E.A (View-less)",
          "internalWebPropertyId": "3005",
          "level": "STANDARD",
          "websiteUrl": "http://example.com"
        }
      ]
    }
  ]
};

export default class ViewSelector extends Component {

  state = {}

  componentDidMount() {
    this.handleAccountChange({target: {value: '1001'}});
  }

  handleAccountChange = ({target}) => {
    const accounts = accountSummaries.items;
    const [account] = accounts.filter((account) => account.id === target.value);
    const properties = account.webProperties;
    const property = properties[0];
    const views = property.profiles;
    const view = views[0];

    this.setState({
      accounts,
      account,
      properties,
      property,
      views,
      view,
    });
  }

  handlePropertyChange = ({target}) => {
    const [property] = this.state.properties.filter((property) => property.id === target.value);
    const views = property.profiles;
    const view = views[0];

    this.setState({
      property,
      views,
      view,
    });
  }

  handleViewChange = ({target}) => {
    const [view] = this.state.views.filter((view) => view.id === target.value);

    this.setState({view});
  }

  render() {
    const {accounts, account, properties, property,
        views, view, viewId} = this.state;

    if (!(account && property && view)) return null;

    return (
      <div>
        <select
          onChange={this.handleAccountChange}
          value={account.id || ''}>
          {accounts.map((account, i) => (
            <option key={i} value={account.id}>{account.name}</option>
          ))}
        </select>
        <select
          onChange={this.handlePropertyChange}
          value={property.id || ''}>
          {properties.map((property, i) => (
            <option key={i} value={property.id}>{property.name}</option>
          ))}
        </select>
        <select
          onChange={this.handleViewChange}
          value={view.id || ''}>
          {views.map((view, i) => (
            <option key={i} value={view.id}>{view.name}</option>
          ))}
        </select>
      </div>
    )
  }
}