Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: PatientNoteCard Text Overflowing and Current Address #9593

Closed
wants to merge 9 commits into from
Closed

Fix: PatientNoteCard Text Overflowing and Current Address #9593

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
1fd83f9
fix note card issue
AdityaJ2305 Dec 27, 2024
70edafe
fix current address issue
AdityaJ2305 Dec 27, 2024
0e72cb1
fix shift enter not working
AdityaJ2305 Dec 27, 2024
4e905b4
fix broken action button
AdityaJ2305 Dec 27, 2024
b63b4a3
Merge branch 'develop' into issue/9592/patientnote_card_and_address
AdityaJ2305 Dec 28, 2024
befa1de
Merge branch 'develop' into issue/9592/patientnote_card_and_address
AdityaJ2305 Dec 28, 2024
559b3e3
browser default submit
AdityaJ2305 Dec 28, 2024
95bb772
Merge branch 'develop' into issue/9592/patientnote_card_and_address
AdityaJ2305 Dec 29, 2024
82fcb57
Fix:on note tab
AdityaJ2305 Dec 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/components/Facility/PatientNoteCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,7 +207,9 @@ const PatientNoteCard = ({
</div>
</div>
) : (
<div className="text-sm text-secondary-700">{noteField}</div>
<div className="text-sm text-secondary-700 break-words">
{noteField}
</div>
)}
</div>
}
Expand Down
5 changes: 5 additions & 0 deletions src/components/Form/FormFields/TextAreaFormField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,11 @@ const TextAreaFormField = forwardRef(
)}
onFocus={props.onFocus}
onBlur={props.onBlur}
onKeyDown={(e) => {
if (e.key === "Enter" && !e.shiftKey && !e.metaKey) {
e.stopPropagation();
}
}}
Copy link
Member

@rithviknishad rithviknishad Dec 27, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

although it may solve the issue, why do we need these hacks? can't we stick with html standards? solve the root cause :) this is just hiding the root cause

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The condition is added to handle different behaviors for components like DiscussNote (where Shift + Enter should send a message) and forms like Add Patient (where just Enter should submit the form). By stopping the propagation only when Enter is pressed, it ensures both use cases work as intended without interference.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

are you sure that textarea element triggers a "submit" event when pressing enter in the first place? i don't think the issue is with TextAreaFormField itself in the first place.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Add Patient submit action gets trigger on pressing enter key

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

care_fe/src/components/Form/Form.tsx

Line 102 in 37dce64

if (e.key === "Enter") {

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

and is textarea form field responsible for it?

do try replicating this with simple html textarea and form component. pressing enter on textarea does not trigger form submit by itself.

/>
</FormField>
);
Expand Down
10 changes: 5 additions & 5 deletions src/components/Patient/PatientHome.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import CareIcon from "@/CAREUI/icons/CareIcon";

import { Button } from "@/components/ui/button";

import { AuthorizedButton } from "@/components/Common/AuthorizedButton";
import ConfirmDialog from "@/components/Common/ConfirmDialog";
import UserAutocomplete from "@/components/Common/UserAutocompleteFormField";

Expand Down Expand Up @@ -37,6 +36,7 @@ import {
relativeDate,
} from "../../Utils/utils";
import { Avatar } from "../Common/Avatar";
import ButtonV2 from "../Common/ButtonV2";
import Loading from "../Common/Loading";
import Page from "../Common/Page";
import { SkillModel, UserBareMinimum } from "../Users/models";
Expand Down Expand Up @@ -523,7 +523,7 @@ export const PatientHome = (props: {

{NonReadOnlyUsers(authUser.user_type) && (
<div>
<AuthorizedButton
<ButtonV2
id="assign-volunteer"
onClick={() => setOpenAssignVolunteerDialog(true)}
disabled={false}
Expand All @@ -536,12 +536,12 @@ export const PatientHome = (props: {
? t("update_volunteer")
: t("assign_to_volunteer")}
</span>
</AuthorizedButton>
</ButtonV2>
</div>
)}

<div>
<AuthorizedButton
<ButtonV2
id="patient-allow-transfer"
className="flex w-full flex-row bg-white font-semibold text-green-800 hover:bg-secondary-200"
disabled={
Expand All @@ -564,7 +564,7 @@ export const PatientHome = (props: {
? t("disable_transfer")
: t("allow_transfer")}
</span>
</AuthorizedButton>
</ButtonV2>
</div>
</div>
</div>
Expand Down
Loading