[AutoComplete] Only render placeholder attribute when the parameter is provided (#3919)

Author: MarvinKlein1508

src/Core/Components/List/FluentAutocomplete.razor

@@ -22,7 +22,7 @@
                          ReadOnly="@ReadOnly"
                          Label="@Label"
                          LabelTemplate="@LabelTemplate"
-                         Placeholder="@(SelectedOptions?.Any() is false ? Placeholder : string.Empty)"
+                         Placeholder="@(SelectedOptions is null || SelectedOptions?.Any() is false ? Placeholder : null)"
                          aria-expanded="@(IsMultiSelectOpened ? "true" : "false")"
                          aria-controls="@(IsMultiSelectOpened ? IdPopup : string.Empty)"
                          aria-label="@GetAutocompleteAriaLabel()"

tests/Core/List/FluentAutocompleteTests.FluentAutocomplete_AutofocusAttribute.verified.razor.html

@@ -1,6 +1,6 @@
 
 <div class=" fluent-autocomplete-multiselect" style="width: 100%;" b-hg72r5b4ox="">
-  <fluent-text-field style="width: 100%; min-width: 100%;" autofocus="" placeholder="" id="xxx" value="" current-value="" appearance="outline" blazor:onchange="1" role="combobox" aria-expanded="false" aria-controls="" blazor:onclick="2" blazor:oninput="3" blazor:elementreference="xxx">
+  <fluent-text-field style="width: 100%; min-width: 100%;" autofocus="" id="xxx" value="" current-value="" appearance="outline" blazor:onchange="1" role="combobox" aria-expanded="false" aria-controls="" blazor:onclick="2" blazor:oninput="3" blazor:elementreference="xxx">
     <svg slot="end" style="width: 16px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="true" tabindex="0" role="button" viewBox="0 0 16 16" blazor:onkeydown="4" blazor:onclick="5" blazor:onfocus="6">
       <title>Search</title>
       <path d="M9.1 10.17a4.5 4.5 0 1 1 1.06-1.06l3.62 3.61a.75.75 0 1 1-1.06 1.06l-3.61-3.61Zm.4-3.67a3 3 0 1 0-6 0 3 3 0 0 0 6 0Z"></path>

tests/Core/List/FluentAutocompleteTests.FluentAutocomplete_Empty.verified.razor.html

@@ -1,6 +1,6 @@
 
 <div class=" fluent-autocomplete-multiselect" style="width: 100%;" b-hg72r5b4ox="">
-  <fluent-text-field style="width: 100%; min-width: 100%;" placeholder="" id="xxx" value="" current-value="" appearance="outline" blazor:onchange="1" role="combobox" aria-expanded="false" aria-controls="" blazor:onclick="2" blazor:oninput="3" blazor:elementreference="xxx">
+  <fluent-text-field style="width: 100%; min-width: 100%;" id="xxx" value="" current-value="" appearance="outline" blazor:onchange="1" role="combobox" aria-expanded="false" aria-controls="" blazor:onclick="2" blazor:oninput="3" blazor:elementreference="xxx">
     <svg slot="end" style="width: 16px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="true" tabindex="0" role="button" viewBox="0 0 16 16" blazor:onkeydown="4" blazor:onclick="5" blazor:onfocus="6">
       <title>Search</title>
       <path d="M9.1 10.17a4.5 4.5 0 1 1 1.06-1.06l3.62 3.61a.75.75 0 1 1-1.06 1.06l-3.61-3.61Zm.4-3.67a3 3 0 1 0-6 0 3 3 0 0 0 6 0Z"></path>

tests/Core/List/FluentAutocompleteTests.FluentAutocomplete_InvokeSearchOptions.verified.razor.html

@@ -1,6 +1,6 @@
 
 <div class=" fluent-autocomplete-multiselect" style="width: 100%;" b-hg72r5b4ox="">
-  <fluent-text-field style="width: 100%; min-width: 100%;" placeholder="" id="xxx" value="" current-value="" appearance="outline" blazor:onchange="1" role="combobox" aria-expanded="true" aria-controls="myComponent-popup" aria-label="1-Denis Voituron (1 of 1)" blazor:onclick="2" blazor:oninput="3" blazor:elementreference="">
+  <fluent-text-field style="width: 100%; min-width: 100%;" id="xxx" value="" current-value="" appearance="outline" blazor:onchange="1" role="combobox" aria-expanded="true" aria-controls="myComponent-popup" aria-label="1-Denis Voituron (1 of 1)" blazor:onclick="2" blazor:oninput="3" blazor:elementreference="">
     <svg slot="end" style="width: 16px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="true" tabindex="0" role="button" viewBox="0 0 16 16" blazor:onkeydown="4" blazor:onclick="5" blazor:onfocus="6">
       <title>Search</title>
       <path d="M9.1 10.17a4.5 4.5 0 1 1 1.06-1.06l3.62 3.61a.75.75 0 1 1-1.06 1.06l-3.61-3.61Zm.4-3.67a3 3 0 1 0-6 0 3 3 0 0 0 6 0Z"></path>

tests/Core/List/FluentAutocompleteTests.FluentAutocomplete_Keyboard-ArrowDown.verified.razor.html

@@ -1,6 +1,6 @@
 
 <div class=" fluent-autocomplete-multiselect" style="width: 100%;" b-hg72r5b4ox="">
-  <fluent-text-field style="width: 100%; min-width: 100%;" placeholder="" id="xxx" value="" current-value="" appearance="outline" blazor:onchange="1" role="combobox" aria-expanded="true" aria-controls="myComponent-popup" aria-label="2-Vincent Baaij (2 of 3)" blazor:onclick="2" blazor:oninput="3" blazor:elementreference="">
+  <fluent-text-field style="width: 100%; min-width: 100%;" id="xxx" value="" current-value="" appearance="outline" blazor:onchange="1" role="combobox" aria-expanded="true" aria-controls="myComponent-popup" aria-label="2-Vincent Baaij (2 of 3)" blazor:onclick="2" blazor:oninput="3" blazor:elementreference="">
     <fluent-horizontal-scroll id="xxx" style="width: 100%;" slot="start" b-hg72r5b4ox="">
       <fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToPrevious();" slot="previous-flipper" aria-hidden="false" aria-label="Previous" title="Previous" role="button" tabindex="0" class="previous fluent-autocomplete-previous" direction="previous" b-hg72r5b4ox=""></fluent-flipper>
       <fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToNext();" slot="next-flipper" aria-hidden="false" aria-label="Next" title="Next" role="button" tabindex="0" class="next fluent-autocomplete-next" direction="next" b-hg72r5b4ox=""></fluent-flipper>

tests/Core/List/FluentAutocompleteTests.FluentAutocomplete_Keyboard-ArrowUp.verified.razor.html

@@ -1,6 +1,6 @@
 
 <div class=" fluent-autocomplete-multiselect" style="width: 100%;" b-hg72r5b4ox="">
-  <fluent-text-field style="width: 100%; min-width: 100%;" placeholder="" id="xxx" value="" current-value="" appearance="outline" blazor:onchange="1" role="combobox" aria-expanded="true" aria-controls="myComponent-popup" aria-label="1-Denis Voituron (1 of 3)" blazor:onclick="2" blazor:oninput="3" blazor:elementreference="">
+  <fluent-text-field style="width: 100%; min-width: 100%;" id="xxx" value="" current-value="" appearance="outline" blazor:onchange="1" role="combobox" aria-expanded="true" aria-controls="myComponent-popup" aria-label="1-Denis Voituron (1 of 3)" blazor:onclick="2" blazor:oninput="3" blazor:elementreference="">
     <fluent-horizontal-scroll id="xxx" style="width: 100%;" slot="start" b-hg72r5b4ox="">
       <fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToPrevious();" slot="previous-flipper" aria-hidden="false" aria-label="Previous" title="Previous" role="button" tabindex="0" class="previous fluent-autocomplete-previous" direction="previous" b-hg72r5b4ox=""></fluent-flipper>
       <fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToNext();" slot="next-flipper" aria-hidden="false" aria-label="Next" title="Next" role="button" tabindex="0" class="next fluent-autocomplete-next" direction="next" b-hg72r5b4ox=""></fluent-flipper>

tests/Core/List/FluentAutocompleteTests.FluentAutocomplete_Keyboard-Backspace.verified.razor.html

@@ -1,6 +1,6 @@
 
 <div class=" fluent-autocomplete-multiselect" style="width: 100%;" b-hg72r5b4ox="">
-  <fluent-text-field style="width: 100%; min-width: 100%;" placeholder="" id="xxx" value="" current-value="" appearance="outline" blazor:onchange="1" role="combobox" aria-expanded="true" aria-controls="myComponent-popup" aria-label="1-Denis Voituron (1 of 3)" blazor:onclick="2" blazor:oninput="3" blazor:elementreference="">
+  <fluent-text-field style="width: 100%; min-width: 100%;" id="xxx" value="" current-value="" appearance="outline" blazor:onchange="1" role="combobox" aria-expanded="true" aria-controls="myComponent-popup" aria-label="1-Denis Voituron (1 of 3)" blazor:onclick="2" blazor:oninput="3" blazor:elementreference="">
     <fluent-horizontal-scroll id="xxx" style="width: 100%;" slot="start" b-hg72r5b4ox="">
       <fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToPrevious();" slot="previous-flipper" aria-hidden="false" aria-label="Previous" title="Previous" role="button" tabindex="0" class="previous fluent-autocomplete-previous" direction="previous" b-hg72r5b4ox=""></fluent-flipper>
       <fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToNext();" slot="next-flipper" aria-hidden="false" aria-label="Next" title="Next" role="button" tabindex="0" class="next fluent-autocomplete-next" direction="next" b-hg72r5b4ox=""></fluent-flipper>

tests/Core/List/FluentAutocompleteTests.FluentAutocomplete_Keyboard-Escape.verified.razor.html

@@ -1,6 +1,6 @@
 
 <div class=" fluent-autocomplete-multiselect" style="width: 100%;" b-hg72r5b4ox="">
-  <fluent-text-field style="width: 100%; min-width: 100%;" placeholder="" id="xxx" value="" current-value="" appearance="outline" blazor:onchange="1" role="combobox" aria-expanded="false" aria-controls="" aria-label="Selected 1-Denis Voituron, 2-Vincent Baaij" blazor:onclick="2" blazor:oninput="3" blazor:elementreference="">
+  <fluent-text-field style="width: 100%; min-width: 100%;" id="xxx" value="" current-value="" appearance="outline" blazor:onchange="1" role="combobox" aria-expanded="false" aria-controls="" aria-label="Selected 1-Denis Voituron, 2-Vincent Baaij" blazor:onclick="2" blazor:oninput="3" blazor:elementreference="">
     <fluent-horizontal-scroll id="xxx" style="width: 100%;" slot="start" b-hg72r5b4ox="">
       <fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToPrevious();" slot="previous-flipper" aria-hidden="false" aria-label="Previous" title="Previous" role="button" tabindex="0" class="previous fluent-autocomplete-previous" direction="previous" b-hg72r5b4ox=""></fluent-flipper>
       <fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToNext();" slot="next-flipper" aria-hidden="false" aria-label="Next" title="Next" role="button" tabindex="0" class="next fluent-autocomplete-next" direction="next" b-hg72r5b4ox=""></fluent-flipper>

tests/Core/List/FluentAutocompleteTests.FluentAutocomplete_MaxAutoHeight_Opened.verified.razor.html

@@ -1,6 +1,6 @@
 
 <div class=" fluent-autocomplete-multiselect" style="width: 100%;" auto-height="" b-hg72r5b4ox="">
-  <fluent-text-field style="width: 100%; min-width: 100%;" placeholder="" id="xxx" value="" current-value="" appearance="outline" blazor:onchange="1" role="combobox" aria-expanded="true" aria-controls="myComponent-popup" aria-label="No items found" blazor:onclick="2" blazor:oninput="3" blazor:elementreference="">
+  <fluent-text-field style="width: 100%; min-width: 100%;" id="xxx" value="" current-value="" appearance="outline" blazor:onchange="1" role="combobox" aria-expanded="true" aria-controls="myComponent-popup" aria-label="No items found" blazor:onclick="2" blazor:oninput="3" blazor:elementreference="">
     <div id="xxx" slot="start" class="auto-height" style="max-height: 200px;" b-hg72r5b4ox="">
       <fluent-badge id="xxx" appearance="neutral" blazor:onclick="4" aria-label="1-Denis Voituron" blazor:elementreference="">
         <span style="width: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap;">1-Denis Voituron<svg style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer; margin: 2px 0px 0px 2px;" focusable="true" tabindex="0" role="button" viewBox="0 0 24 24" blazor:onkeydown="9" blazor:onclick="10">

tests/Core/List/FluentAutocompleteTests.FluentAutocomplete_MultipleEqualsFalse.verified.razor.html

@@ -1,6 +1,6 @@
 
 <div class=" fluent-autocomplete-multiselect" style="width: 100%;" single-select="" b-hg72r5b4ox="">
-  <fluent-text-field style="width: 100%; min-width: 100%;" placeholder="" id="xxx" value="" current-value="" appearance="outline" blazor:onchange="1" role="combobox" aria-expanded="false" aria-controls="" blazor:onclick="2" blazor:oninput="3" blazor:elementreference="xxx">
+  <fluent-text-field style="width: 100%; min-width: 100%;" id="xxx" value="" current-value="" appearance="outline" blazor:onchange="1" role="combobox" aria-expanded="false" aria-controls="" blazor:onclick="2" blazor:oninput="3" blazor:elementreference="xxx">
     <fluent-horizontal-scroll id="xxx" style="width: 100%;" slot="start" b-hg72r5b4ox="">
       <fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToPrevious();" slot="previous-flipper" aria-hidden="false" aria-label="Previous" title="Previous" role="button" tabindex="0" class="previous fluent-autocomplete-previous" direction="previous" b-hg72r5b4ox=""></fluent-flipper>
       <fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToNext();" slot="next-flipper" aria-hidden="false" aria-label="Next" title="Next" role="button" tabindex="0" class="next fluent-autocomplete-next" direction="next" b-hg72r5b4ox=""></fluent-flipper>