fix: search field without flag

sites/public/src/components/listings/search/ListingsSearchModalDeprecated.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from "react"
+import React, { ChangeEvent, useCallback, useEffect, useState } from "react"
 import { ListingSearchParams, parseSearchString } from "../../../lib/listings/search"
 import { t } from "@bloom-housing/ui-components"
 import {
@@ -25,8 +25,7 @@ const hyphenContainerStyle: React.CSSProperties = {
 const hyphenStyle: React.CSSProperties = {
   fontSize: "2rem",
   position: "relative",
-  bottom: "1px",
-  padding: ".7rem",
+  padding: "0.5rem .7rem",
   width: "100%",
 }
 
@@ -45,6 +44,10 @@ const rentStyle: React.CSSProperties = {
   display: "flex",
 }
 
+const propertySearchTitle: React.CSSProperties = {
+  paddingBlock: "var(--seeds-s4)",
+}
+
 const clearButtonStyle: React.CSSProperties = {
   textDecoration: "underline",
 }
@@ -133,6 +136,9 @@ export function ListingsSearchModal(props: ListingsSearchModalProps) {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     document.querySelector("#monthlyRent").value = null
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    document.querySelector("#propertyName").value = null
   }
 
   const onSubmit = () => {
@@ -221,6 +227,12 @@ export function ListingsSearchModal(props: ListingsSearchModalProps) {
   const minRentFormatted = watch("minRent")
   const currencyFormatting = /,|\.\d{2}/g
 
+  const validateSearchInput = (e: ChangeEvent<HTMLInputElement>) => {
+    // handle semicolon by searching text before since removing could lead to missing exact match
+    const searchableValue = e.target.value.split(";")[0]
+    updateValue("propertyName", searchableValue)
+  }
+
   // workarounds to leverage UI-C's currency formatting without full refactor
   useEffect(() => {
     if (typeof minRentFormatted !== "undefined") {
@@ -292,8 +304,8 @@ export function ListingsSearchModal(props: ListingsSearchModalProps) {
               getValues={getValues}
               defaultValue={formValues.minRent}
               placeholder={t("t.minPrice")}
-              className="doorway-field pb-6"
-              inputClassName="rent-input"
+              className="doorway-field"
+              inputClassName="typed-input"
               labelClassName="input-label"
             ></Field>
             <div style={hyphenContainerStyle}>
@@ -308,13 +320,29 @@ export function ListingsSearchModal(props: ListingsSearchModalProps) {
               getValues={getValues}
               defaultValue={formValues.monthlyRent}
               placeholder={t("t.maxPrice")}
-              className="doorway-field pb-6"
-              inputClassName="rent-input"
+              className="doorway-field"
+              inputClassName="typed-input"
               labelClassName="input-label"
             ></Field>
           </div>
         </div>
-
+        <div style={inputSectionStyle}>
+          <div style={{ ...sectionTitle, ...propertySearchTitle }}>
+            {t("listings.propertyName")}
+          </div>
+          <Field
+            type="text"
+            id="propertyName"
+            name="propertyName"
+            subNote={t("listings.propertyName.helper")}
+            register={register}
+            onChange={validateSearchInput}
+            defaultValue={formValues.propertyName}
+            className="doorway-field pb-4"
+            inputClassName="typed-input"
+            labelClassName="input-label"
+          />
+        </div>
         <div style={inputSectionStyle}>
           <div style={sectionTitleTopBorder}>{t("t.counties")}</div>
           <FieldGroup