Uses LESS starterkit to create sub-theme. All work well. But, can't customize search box form.

  • Enable 'Display title' for block doesn't show the Label
  • Overwrite Placeholder use mytheme_form_search_block_form_alter() doesn't work.
  • Overwrite Placeholder use Translation module work. But it change all placeholder, label & submit value. It's weird they should have difference value.
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

mobiro created an issue. See original summary.

Majdi’s picture

I can confirm the search block title visibility problem, that's because the CSS class .visually-hidden where added in the template file block--search-form-block.html.twig

I attach patch for that but i'm not sure if this how it should be

For the placeholder problem, could you please paste the code you are using to customize the form.

markhalliwell’s picture

Status: Active » Closed (works as designed)

The block title is hidden by default because the input field has the placeholder.

The placeholder code is located in https://drupal-bootstrap.org/api/bootstrap/src%21Plugin%21Process%21Sear...

glycid’s picture

Status: Closed (works as designed) » Active

@markcarver: Changing the placeholder value in Search.php has no effekt!

<?php
$element->setAttribute('placeholder', $element->getProperty('placeholder', $element->getProperty('title', t('Search'))));
?>

Where can I change the placeholder value?

nikathone’s picture

Not sure if this can be considered as right solution but for now in order to change the placeholder I also need to change the title attribute

<?php

namespace Drupal\custom_theme\Plugin\Form;

use Drupal\bootstrap\Annotation\BootstrapForm;
use Drupal\bootstrap\Plugin\Form\SearchBlockForm as BootstrapSearchBlockForm;
use Drupal\bootstrap\Utility\Element;
use Drupal\Core\Form\FormStateInterface;

/**
 * @BootstrapForm("search_block_form")
 */
class SearchBlockForm extends BootstrapSearchBlockForm {

  /**
   * {@inheritdoc}
   */
  public function alterFormElement(Element $form, FormStateInterface $form_state, $form_id = NULL) {
    parent::alterFormElement($form, $form_state, $form_id);
    // Changing placeholder text.
    $title = $this->t('Search this site');
    /** @var \Drupal\bootstrap\Utility\Element $form->keys */
    $form->keys->setAttribute('placeholder', $title);
    $form->keys->setProperty('title', $title);
  }
}

I can remove $form->keys->setAttribute('placeholder', $title); from the code above but my placeholder will still work. Maybe this belongs in another issue as a bug...

markhalliwell’s picture

Category: Bug report » Support request
Status: Active » Closed (works as designed)

As stated above, the block title is visually hidden since there is a placeholder in the textfield. If you don't like this, you can easily change this in your sub-theme.

The placeholder is created in Search::processElement.

In your sub-theme, you can either:

a) Sub-class this process method or
b) Create a new process method that runs after the base-theme's

In either case, this does work properly if configured properly.

sanu12345’s picture

Find the search box with this form you don't need to customize anything just copy and paste the code...

devil2005’s picture

Same issue here... can't editing the placeholder... but anothers attributes are modified... i don't know why.

function projet_form_search_block_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {
  $form['actions']['submit']['#value'] = t('GO!'); // Change the text on the submit button
  $form['keys']['#attributes']['title'] = t('Search placeholder alter'); //Adds a mousehover title to input box
  $form['keys']['#attributes']['placeholder'] = 'Enter a search term alter'; // Adds a placeholder
}

first and second lines are functional but third not...

devil2005’s picture

This code works :

function projet_preprocess_input(&$variables) {
  // Set a placeholder for all search form elements.
  if ($variables['attributes']['type'] == 'search') {
    $variables['attributes']['placeholder'] = 'youhou';
  }
}