InstantSearch can't remove blue cross which resets query

Question

I'm using InstantSearch from algolia to create a input field, but I'm having trouble debugging where this cross comes from. It appears when the input field gets focused or hovered, the blue cross appear and it looks like it clears the query. (I already have a button for reseting). Inspecting elements wont show anything "popping" up when hovering/focusing and I'm wondering how it got there

Is there something i have skipped? or added extras in the css? I may have used a template for this before implementing

my html:

  <div className="items-center h-full">
        <InstantSearch
          indexName={variables.ALGOLIA_INDEX}
          searchClient={algolia}
        >
          <div className="h-full flex flex-col items-center justify-center">
            <SearchBox
              translations={{
                placeholder: '',
                resetTitle: 'Tøm søkefeltet',
              }}
              reset={
                <SearchCloseIcon className=" h-5 md:h-10 transform duration-500 hover:scale-110 cursor-pointer" />
              }
              autoFocus={true}
            />
            <Results />
          </div>
        </InstantSearch>
      </div>

my css:

.ais-SearchBox {
}

.ais-SearchBox-form {
  display: flex;
}
.ais-Pagination {
  margin-top: 1em;
}
.ais-SearchBox-resetIcon {
  height: 2rem;
  width: 2rem;
}
.left-panel {
  float: left;
  width: 250px;
}

.right-panel {
  margin-left: 260px;
}

.ais-InstantSearch {
  max-width: 960px;
  overflow: hidden;
  margin: 0 auto;
}

.ais-Hits-item {
  margin-bottom: 1em;
  width: calc(50% - 1rem);
}

.ais-Hits-item img {
  margin-right: 1em;
}

.hit-name {
  margin-bottom: 0.5em;
}

.hit-description {
  color: #888;
  font-size: 14px;
  margin-bottom: 0.5em;
}
.ais-SearchBox-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0.3rem 1.7rem;
  position: relative;
  background-color: transparent;
  border: 1px solid white;
  color: white;
  text-align: center;
  font-size: 2.5rem;
  caret-color: #d8fc91;
}
.ais-SearchBox-input::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: white;
  opacity: 1; /* Firefox */
}

.ais-SearchBox-input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: white;
}

.ais-SearchBox-input::-ms-input-placeholder {
  /* Microsoft Edge */
  color: white;
}
.ais-SearchBox-input:focus {
  outline: none;
}
.ais-Highlight-highlighted {
  background-color: aqua;
}
.ais-SearchBox-submitIcon {
  display: none;
}
@media (min-width: 768px) {
  /*Medium in tailwind*/
  .ais-SearchBox-input {
    font-size: 5.625rem;
  }
}

Emlynne

Try to hide it with ::-ms-clear: { display: none; } – Davinadavine

@IharAliakseyenka, it did nothing unfortunately :( – Emlynne

I guess your has type="search" attribute. Maybe this #18856746 will help? – Davinadavine

@IharAliakseyenka thanks the solution there fixed it!! – Emlynne

Answer 1

having type="search" on the input seems to be the problem here.(SearchBox tag already gives it the type automaticly)

added this to the css:

.ais-SearchBox-input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

Emlynne