ks filter: sync proxy value for text input; remove label from popover

src/UI/Implementation/Component/Input/Field/FilterContextRenderer.php

@@ -146,22 +146,22 @@ protected function renderInputFieldWithContext(Template $input_tpl, Input $input
 		 * a name source)?");
 		 * } */
 		if ($input->getName()) {
-			$tpl->setVariable("NAME", $input->getName());
+//			$tpl->setVariable("NAME", $input->getName());
 		} else {
-			$tpl->setVariable("NAME", "");
+//			$tpl->setVariable("NAME", "");
 		}
 
-		$tpl->setVariable("LABEL", $input->getLabel());
+//		$tpl->setVariable("LABEL", $input->getLabel());
 		$tpl->setVariable("INPUT", $this->renderInputField($input_tpl, $input));
 
 		if ($input->getByline() !== null) {
-			$tpl->setCurrentBlock("byline");
-			$tpl->setVariable("BYLINE", $input->getByline());
-			$tpl->parseCurrentBlock();
+//			$tpl->setCurrentBlock("byline");
+//			$tpl->setVariable("BYLINE", $input->getByline());
+//			$tpl->parseCurrentBlock();
 		}
 
 		if ($input->isRequired()) {
-			$tpl->touchBlock("required");
+//			$tpl->touchBlock("required");
 		}
 
 
@@ -178,12 +178,24 @@ protected function renderInputFieldWithContext(Template $input_tpl, Input $input
 	 */
 	protected function renderInputField(Template $tpl, Input $input) {
 
-		$tpl->setVariable("NAME", $input->getName());
-
-		if ($input->getValue() !== null) {
-			$tpl->setCurrentBlock("value");
-			$tpl->setVariable("VALUE", $input->getValue());
-			$tpl->parseCurrentBlock();
+		switch (true) {
+			case ($input instanceof Text):
+				$tpl->setVariable("NAME", $input->getName());
+
+				if ($input->getValue() !== null) {
+					$tpl->setCurrentBlock("value");
+					$tpl->setVariable("VALUE", $input->getValue()."::");
+					$tpl->parseCurrentBlock();
+				}
+
+				$input = $input->withAdditionalOnLoadCode(function ($id) {
+					$code = "$('#$id').on('input', function(event) {
+							il.UI.filter.handleChange(event, '$id', $('#$id').val());
+						});";
+					return $code;
+				});
+				$this->maybeRenderId($input, $tpl);
+				break;
 		}
 
 		return $tpl->get();
@@ -217,15 +229,23 @@ protected function renderAddField(RendererInterface $default_renderer) {
 	 * @param Component\JavascriptBindable $component
 	 * @param Template                     $tpl
 	 */
-	protected function maybeRenderId(Component\Component $component, $tpl) {
+	protected function maybeRenderId(Component\JavascriptBindable $component, $tpl) {
 		$id = $this->bindJavaScript($component);
 		if ($id !== null) {
-			$tpl->setCurrentBlock("with_id");
+			$tpl->setCurrentBlock("id");
 			$tpl->setVariable("ID", $id);
 			$tpl->parseCurrentBlock();
 		}
 	}
 
+	/**
+	 * @inheritdoc
+	 */
+	public function registerResources(\ILIAS\UI\Implementation\Render\ResourceRegistry $registry) {
+		parent::registerResources($registry);
+		$registry->register('./src/UI/templates/js/Input/Container/filter.js');
+	}
+
 
 	/**
 	 * @inheritdoc

src/UI/Implementation/Component/Input/Field/Text.php

@@ -5,11 +5,15 @@
 namespace ILIAS\UI\Implementation\Component\Input\Field;
 
 use ILIAS\UI\Component as C;
+use ILIAS\UI\Implementation\Component\JavaScriptBindable;
+use ILIAS\UI\Implementation\Component\Triggerer;
 
 /**
  * This implements the text input.
  */
 class Text extends Input implements C\Input\Field\Text {
+	use JavaScriptBindable;
+	use Triggerer;
 
 	/**
 	 * @inheritdoc

src/UI/templates/default/Input/tpl.context_form.html

@@ -1,6 +1,5 @@
 <div class="form-group row">
-	<label for="{NAME}" class="control-label col-sm-3">{LABEL}<!-- BEGIN required --><span class="asterisk">*</span><!-- END required --></label>
-	<div class="col-sm-9">
+	<div class="col-sm-12">
 		{INPUT}
 		<!-- BEGIN byline --><div class="help-block">{BYLINE}</div><!-- END byline -->
 		<!-- BEGIN error --><div class="help-block alert alert-danger" role="alert">

src/UI/templates/default/Input/tpl.filter_field.html

@@ -1 +1 @@
-<span role="button" tabindex="0" class="form-control il-filter-field" <!-- BEGIN with_id -->id="{ID}"<!-- END with_id --> data-placement="bottom"></span> {POPOVER}
+<span role="button" tabindex="0" class="form-control il-filter-field" <!-- BEGIN id -->id="{ID}"<!-- END id --> data-placement="bottom"></span> {POPOVER}

src/UI/templates/default/Input/tpl.text.html

@@ -1 +1 @@
-<input type="text"<!-- BEGIN value --> value="{VALUE}"<!-- END value --> name="{NAME}" class="form-control form-control-sm" />
+<input <!-- BEGIN id --> id="{ID}"<!-- END id --> type="text"<!-- BEGIN value --> value="{VALUE}"<!-- END value --> name="{NAME}" class="form-control form-control-sm" />

src/UI/templates/js/Input/Container/filter.js

@@ -0,0 +1,32 @@
+/**
+ * Filter
+ *
+ * @author <[email protected]>
+ */
+
+var il = il || {};
+il.UI = il.UI || {};
+
+(function($, UI) {
+
+	UI.filter = (function ($) {
+		/**
+		 *
+		 * @param event
+		 * @param id
+		 * @param value_as_string
+		 */
+		var handleChange = function(event, id, value_as_string) {
+			var pop_id = $("#" + id).parents(".il-popover").attr("id");
+			$("span[data-target='" + pop_id + "']").html(value_as_string);
+		};
+
+		/**
+		 * Public interface
+		 */
+		return {
+			handleChange: handleChange
+		};
+
+	})($);
+})($, il.UI);