<templates>
  <t t-name="o-spreadsheet-NamedRangeSelector">
    <div
      class="o-named-range-selector d-flex align-items-center rounded p-1 my-1"
      t-ref="this.namedRangeSelectorRef"
      t-att-class="{
          'selected': this.topBarToolStore.isActive,
        }">
      <TextInput
        t-key="this.selectionKey"
        value="this.inputValue"
        onChange.bind="this.changeInputValue"
        onInput.bind="this.onInput"
        selectContentOnFocus="true"
        onFocused.bind="this.onInputFocused"
        onBlur.bind="this.onInputBlur"
        resetOnBlur="true"
      />
      <div class="o-hoverable-button" t-on-click.stop="this.openDropdown">
        <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
      </div>
    </div>

    <MenuPopover
      t-if="this.topBarToolStore.isActive"
      disableKeyboardNavigation="true"
      anchorRect="this.menuState.anchorRect"
      menuItems="this.menuState.menuItems"
      onClose="() => {}"
      popoverPositioning="'bottom-left'"
    />
  </t>
</templates>
