diff --git a/src/components/autocomplete/MdFilledAutoComplete.vue b/src/components/autocomplete/MdFilledAutoComplete.vue
index a3d3284..500835d 100644
--- a/src/components/autocomplete/MdFilledAutoComplete.vue
+++ b/src/components/autocomplete/MdFilledAutoComplete.vue
@@ -4,8 +4,13 @@
       <MdFilledTextField v-model="searchText" :label="props.label" @focus="onTextFieldFocus" @input="onTextFieldInput"></MdFilledTextField>
     </template>
 
-    <MdList v-if="props.items && props.items.length">
-      <MdListItem v-for="(item, index) in filteredItems" :selected="modelValue === item" :headline="item" @click="onMenuListItemClick(index)"></MdListItem>
+    <MdList>
+      <template v-if="filteredItems.length">
+        <MdListItem v-for="(item, index) in filteredItems" :selected="modelValue === item" :headline="item" @click="onMenuListItemClick(index)"></MdListItem>
+      </template>
+      <template v-else>
+        <MdListItem headline="No data available"></MdListItem>
+      </template>
     </MdList>
   </MdMenu>
 </template>
@@ -26,7 +31,7 @@ let selecting = ref(false);
 let isPristine = ref(true);
 
 const filteredItems = computed(() => {
-  if (!selecting && searchText.value) {
+  if (!selecting.value && searchText.value) {
     return props.items.filter((item) => item.toLocaleLowerCase().includes(searchText.value.toLocaleLowerCase()));
   }
   return props.items;
diff --git a/src/components/field/MdField.vue b/src/components/field/MdField.vue
index b72e087..1800510 100644
--- a/src/components/field/MdField.vue
+++ b/src/components/field/MdField.vue
@@ -84,10 +84,12 @@ const onFocusout = () => {
 
   &__start {
     width: 16px;
+    flex-shrink: 0;
   }
 
   &__middle {
     position: relative;
+    width: 100%;
 
     #{$this}__label {
       position: absolute;
@@ -105,6 +107,7 @@ const onFocusout = () => {
       z-index: 1;
     }
     #{$this}__content {
+      width: 100%;
     }
   }
 
@@ -139,6 +142,7 @@ const onFocusout = () => {
 
   &__end {
     width: 16px;
+    flex-shrink: 0;
   }
 
   &__state-layer {
diff --git a/src/components/text-field/MdTextFieldBase.vue b/src/components/text-field/MdTextFieldBase.vue
index 80bfa39..45c0c71 100644
--- a/src/components/text-field/MdTextFieldBase.vue
+++ b/src/components/text-field/MdTextFieldBase.vue
@@ -37,6 +37,7 @@ defineProps({
 .md-text-field {
   display: inline-flex;
   outline: none;
+  width: 100%;
 
   &__field {
     cursor: text;
@@ -49,6 +50,7 @@ defineProps({
     color: currentColor;
     outline: none;
     padding: 0;
+    width: 100%;
 
     // Remove built-in datepicker icon on Chrome
     &::-webkit-calendar-picker-indicator {