<commit_before>import React, { Component } from 'react';
import Option from './Option';
import { getOptionIndex } from './utils';

export default class Options extends Component {
  componentWillReceiveProps({ options, highlightedOption }) {
    this.scrollTo({ options, highlightedOption });
  }

  componentDidMount() {
    let { options, highlightedOption } = this.props;
    this.optionsListOffsetHeight = this.optionsList.offsetHeight;
    this.scrollTo({ options, highlightedOption });
  }

  componentDidUpdate() {
    if (!this.optionsListOffsetHeight) {
      this.optionsListOffsetHeight = this.optionsList.offsetHeight;
    }
  }

  scrollTo({ options, highlightedOption }) {
    if (highlightedOption !== this.props.highlightedOption) {
      let optionIndex = getOptionIndex(options, highlightedOption);
      let $option = this.optionsList.querySelector(
        `[data-option-index="${optionIndex}"]`
      );
      let $optionOffsetHeight = $option.offsetHeight;
      let $optionOffsetTop = $option.offsetTop;

      let delta =
        $optionOffsetTop + $optionOffsetHeight - this.optionsListOffsetHeight;

      if (delta > 0) {
        this.optionsList.scrollTop = delta;
      } else {
        this.optionsList.scrollTop = 0;
      }
    }
  }

  render() {
    let {
      options,
      select,
      optionLabelPath,
      optionComponent,
      highlightedIndex,
      onOptionClick,
    } = this.props;

    return (
      <div
        className="PowerSelect__Options"
        ref={optionsList => (this.optionsList = optionsList)}
      >
        {options.map((option, index) => {
          return (
            <Option
              key={index}
              optionIndex={index}
              option={option}
              select={select}
              optionLabelPath={optionLabelPath}
              optionComponent={optionComponent}
              isHighlighted={highlightedIndex === index}
              onOptionClick={() => {
                onOptionClick(index, option);
              }}
            />
          );
        })}
      </div>
    );
  }
}<commit_msg>Check object reference for highlighting the option<commit_after>import React, { Component } from 'react';
import Option from './Option';
import { getOptionIndex } from './utils';

export default class Options extends Component {
  componentWillReceiveProps({ options, highlightedOption }) {
    this.scrollTo({ options, highlightedOption });
  }

  componentDidMount() {
    let { options, highlightedOption } = this.props;
    this.optionsListOffsetHeight = this.optionsList.offsetHeight;
    this.scrollTo({ options, highlightedOption });
  }

  componentDidUpdate() {
    if (!this.optionsListOffsetHeight) {
      this.optionsListOffsetHeight = this.optionsList.offsetHeight;
    }
  }

  scrollTo({ options, highlightedOption }) {
    if (
      highlightedOption &&
      highlightedOption !== this.props.highlightedOption
    ) {
      let optionIndex = getOptionIndex(options, highlightedOption);
      let $option = this.optionsList.querySelector(
        `[data-option-index="${optionIndex}"]`
      );
      let $optionOffsetHeight = $option.offsetHeight;
      let $optionOffsetTop = $option.offsetTop;

      let delta =
        $optionOffsetTop + $optionOffsetHeight - this.optionsListOffsetHeight;

      if (delta > 0) {
        this.optionsList.scrollTop = delta;
      } else {
        this.optionsList.scrollTop = 0;
      }
    }
  }

  render() {
    let {
      options,
      select,
      optionLabelPath,
      optionComponent,
      highlightedOption,
      onOptionClick,
    } = this.props;

    return (
      <div
        className="PowerSelect__Options"
        ref={optionsList => (this.optionsList = optionsList)}
      >
        {options.map((option, index) => {
          return (
            <Option
              key={index}
              optionIndex={index}
              option={option}
              select={select}
              optionLabelPath={optionLabelPath}
              optionComponent={optionComponent}
              isHighlighted={option === highlightedOption}
              onOptionClick={() => {
                onOptionClick(index, option);
              }}
            />
          );
        })}
      </div>
    );
  }
}
{'fraction_non_alphanumeric': 0.11092908963257664, 'fraction_numerical': 0.000936110461034402, 'mean_word_length': 2.275095785440613, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 17, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1594952', 'n_tokens_mistral': 1131, 'n_tokens_neox': 1106, 'n_words': 215}