<commit_before>import { h, Component } from 'preact';
import * as style from './style.css';
import 'add-css:./style.css';
import RangeInputElement from './custom-els/RangeInput';
import './custom-els/RangeInput';
import { linkRef } from 'shared/prerendered-app/util';

interface Props extends preact.JSX.HTMLAttributes {}
interface State {}

export default class Range extends Component<Props, State> {
  rangeWc?: RangeInputElement;

  private onTextInput = (event: Event) => {
    const input = event.target as HTMLInputElement;
    const value = input.value.trim();
    if (!value) return;
    this.rangeWc!.value = input.value;
    this.rangeWc!.dispatchEvent(
      new InputEvent('input', {
        bubbles: event.bubbles,
      }),
    );
  };

  render(props: Props) {
    const { children, ...otherProps } = props;

    const { value, min, max, step } = props;

    return (
      <label class={style.range}>
        <span class={style.labelText}>{children}</span>
        {/* On interaction, Safari gives focus to the first element in the label, so the
        <range-input> is deliberately first. */}
        <div class={style.rangeWcContainer}>
          <range-input
            ref={linkRef(this, 'rangeWc')}
            class={style.rangeWc}
            {...otherProps}
          />
        </div>
        <input
          type="number"
          class={style.textInput}
          value={value}
          min={min}
          max={max}
          step={step}
          onInput={this.onTextInput}<commit_msg>fix: Don't overwrite value while typing (#1082)<commit_after>import { h, Component } from 'preact';
import * as style from './style.css';
import 'add-css:./style.css';
import RangeInputElement from './custom-els/RangeInput';
import './custom-els/RangeInput';
import { linkRef } from 'shared/prerendered-app/util';

interface Props extends preact.JSX.HTMLAttributes {}
interface State {
  textFocused: boolean;
}

export default class Range extends Component<Props, State> {
  rangeWc?: RangeInputElement;
  inputEl?: HTMLInputElement;

  private onTextInput = (event: Event) => {
    const input = event.target as HTMLInputElement;
    const value = input.value.trim();
    if (!value) return;
    this.rangeWc!.value = input.value;
    this.rangeWc!.dispatchEvent(
      new InputEvent('input', {
        bubbles: event.bubbles,
      }),
    );
  };

  private onTextFocus = () => {
    this.setState({ textFocused: true });
  };

  private onTextBlur = () => {
    this.setState({ textFocused: false });
  };

  render(props: Props, state: State) {
    const { children, ...otherProps } = props;

    const { value, min, max, step } = props;
    const textValue = state.textFocused ? this.inputEl!.value : value;

    return (
      <label class={style.range}>
        <span class={style.labelText}>{children}</span>
        {/* On interaction, Safari gives focus to the first element in the label, so the
        <range-input> is deliberately first. */}
        <div class={style.rangeWcContainer}>
          <range-input
            ref={linkRef(this, 'rangeWc')}
            class={style.rangeWc}
            {...otherProps}
          />
        </div>
        <input
          ref={linkRef(this, 'inputEl')}
          type="number"
          class={style.textInput}
          value={textValue}
          min={min}
          max={max}
          step={step}
          onInput={this.onTextInput}
          onFocus={this.onTextFocus}
          onBlur={this.onTextBlur}
{'fraction_non_alphanumeric': 0.13749641936407905, 'fraction_numerical': 0.0011458034947006588, 'mean_word_length': 2.545177664974619, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 23, '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': '4148556', 'n_tokens_mistral': 1052, 'n_tokens_neox': 1027, 'n_words': 250}