MemoEdit AutoSize doesn't work?!

[NeoCoderMatrix86]

I have a component like this:

<!--
This file is part of AudioCuesheetEditor.

AudioCuesheetEditor is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

AudioCuesheetEditor is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with Foobar.  If not, see
<http: //www.gnu.org/licenses />.
-->
@implements IDisposable

@inject ITextLocalizer<ImportFileView> _localizer
@inject SessionStateContainer _sessionStateContainer

<Card>
    <CardHeader>
        <Tabs @bind-SelectedTab="selectedTab">
            <Items>
                <Tab Name="recognizedFilecontent">@_localizer["Preview"]</Tab>
                <Tab Name="editFilecontent">@_localizer["Edit"]</Tab>
            </Items>
        </Tabs>
    </CardHeader>
    <CardBody>
        <TabsContent @bind-SelectedPanel="selectedTab">
            <TabPanel Name="recognizedFilecontent">
                <Text>
                    @if (FileContentRecognized != null)
                    {
                        <pre>
                            @foreach (var line in FileContentRecognized)
                            {
                                if (line != null)
                                {
                                    @((MarkupString)String.Format("{0}<br />", line))
                                }
                            }
                        </pre>
                    }
                </Text>
            </TabPanel>
            <TabPanel Name="editFilecontent">
                <MemoEdit Text="@FileContent" TextChanged="FileContent_TextChanged" AutoSize />
            </TabPanel>
        </TabsContent>
    </CardBody>
</Card>

@code {
    //TODO: FileContent height
    String selectedTab = "recognizedFilecontent";

    public void Dispose()
    {
        _sessionStateContainer.ImportCuesheetChanged -= SessionStateContainer_ImportCuesheetChanged;
    }

    public IReadOnlyCollection<String?>? FileContentRecognized
    {
        get
        {
            if (_sessionStateContainer.TextImportFile != null)
            {
                return _sessionStateContainer.TextImportFile.FileContentRecognized;
            }
            if (_sessionStateContainer.CuesheetImportFile != null)
            {
                return _sessionStateContainer.CuesheetImportFile.FileContentRecognized;
            }
            return null;
        }
    }

    public String? FileContent
    {
        get
        {
            if (_sessionStateContainer.TextImportFile?.FileContent != null)
            {
                return String.Join(Environment.NewLine, _sessionStateContainer.TextImportFile.FileContent);
            }
            if (_sessionStateContainer.CuesheetImportFile?.FileContent != null)
            {
                return String.Join(Environment.NewLine, _sessionStateContainer.CuesheetImportFile.FileContent);
            }
            return null;
        }
    }

    protected override void OnInitialized()
    {
        base.OnInitialized();
        _sessionStateContainer.ImportCuesheetChanged += SessionStateContainer_ImportCuesheetChanged;
    }

    void SessionStateContainer_ImportCuesheetChanged(object? sender, EventArgs args)
    {
        StateHasChanged();
    }

    void FileContent_TextChanged(string text)
    {
        //TODO: Set the text to TextImportFile (or CuesheetImportFile) and Reanalyse
    }
}

The MemoEdit should AutoSize itself to display the file content, but this doesn't seem to work:

Does anybody have a clue, what I should do, to adjust the autosizing?

[stsrki]

I tried it, and it works for me.

Can you give us more information about the

1. Blazorise provider,
2. Browser,
3. any thing else that might help

[stsrki]

No, that's not it. It still works even in accordion

[NeoCoderMatrix86]

I think the problem is related to the text:

public class ImportManager : IDisposable
{
   public String? FileContent
   {
    get
    {
        if (_sessionStateContainer.TextImportFile?.FileContent != null)
        {
            return String.Join(Environment.NewLine, _sessionStateContainer.TextImportFile.FileContent);
        }
        if (_sessionStateContainer.CuesheetImportFile?.FileContent != null)
        {
            return String.Join(Environment.NewLine, _sessionStateContainer.CuesheetImportFile.FileContent);
        }
        return null;
    }
    set
    {
        var fileContentValue = value?.Split(Environment.NewLine);
        if (fileContentValue != null)
        {
            if (_sessionStateContainer.TextImportFile != null)
            {
                _sessionStateContainer.TextImportFile.FileContent = fileContentValue;
            }
            if (_sessionStateContainer.CuesheetImportFile != null)
            {
                _sessionStateContainer.CuesheetImportFile.FileContent = fileContentValue;
            }
        }
    }
   }
}

As soon as I edit the text and add a field, the MemoEdit extends automatically. Or maybe something with the joining of strings (is Environment.NewLine a good idea?).

[NeoCoderMatrix86]

In your example do you change the text string afterwards?

[NeoCoderMatrix86]

In my example the method "ImportManager_FileContentChanged" is called, triggers a StateHasChanged() and then the new text is loaded to the MemoEdit. Maybe there is an issue that the initial text was null.

[NeoCoderMatrix86]

I debugged the "memoEdit.js?v=1.5.3.0" a bit and the autoSize is correct, but the

function onInputChanged(e) {
    if (e && e.target) {
        e.target.style.height = 'auto';
        e.target.style.height = this.scrollHeight + 'px';
        e.target.style.overflowY = 'hidden';
    }
}

has a scrollHeight of 0, which seems to be the problem. Can I get help, where the problem is?

[stsrki]

The problem is on your public String? FileContent. You mutate the value and return the new one that is not tracked by the Blazor internal value. When I converted it to a pure property public String? FileContent { get; set; } it worked as expected. And by manually updating it also calculates the size of the field.

eg

<Button Color="Color.Primary" Clicked="@(()=> FileContent= "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis laoreet dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris molestie luctus tortor, sit amet gravida lacus commodo sit amet. Curabitur eu congue orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam sed aliquet neque, non iaculis ante. Mauris in dui eros. Etiam commodo lacus quis sem tempor, sed iaculis eros feugiat. Maecenas bibendum sollicitudin hendrerit. Proin dictum eget leo at luctus. Praesent diam purus, lobortis nec dictum eu, malesuada at augue. Cras sit amet lobortis ex, non imperdiet nisl. Sed eget lectus nec dui lobortis viverra quis id ex. Pellentesque ullamcorper tincidunt lacus, sed ornare eros rhoncus nec. Praesent tincidunt ex vitae est porta faucibus. Nullam tempor ac sapien sed lobortis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis laoreet dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris molestie luctus tortor, sit amet gravida lacus commodo sit amet. Curabitur eu congue orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam sed aliquet neque, non iaculis ante. Mauris in dui eros. Etiam commodo lacus quis sem tempor, sed iaculis eros feugiat. Maecenas bibendum sollicitudin hendrerit. Proin dictum eget leo at luctus. Praesent diam purus, lobortis nec dictum eu, malesuada at augue. Cras sit amet lobortis ex, non imperdiet nisl. Sed eget lectus nec dui lobortis viverra quis id ex. Pellentesque ullamcorper tincidunt lacus, sed ornare eros rhoncus nec. Praesent tincidunt ex vitae est porta faucibus. Nullam tempor ac sapien sed lobortis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis laoreet dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris molestie luctus tortor, sit amet gravida lacus commodo sit amet. Curabitur eu congue orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam sed aliquet neque, non iaculis ante. Mauris in dui eros. Etiam commodo lacus quis sem tempor, sed iaculis eros feugiat. Maecenas bibendum sollicitudin hendrerit. Proin dictum eget leo at luctus. Praesent diam purus, lobortis nec dictum eu, malesuada at augue. Cras sit amet lobortis ex, non imperdiet nisl. Sed eget lectus nec dui lobortis viverra quis id ex. Pellentesque ullamcorper tincidunt lacus, sed ornare eros rhoncus nec. Praesent tincidunt ex vitae est porta faucibus. Nullam tempor ac sapien sed lobortis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis laoreet dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris molestie luctus tortor, sit amet gravida lacus commodo sit amet. Curabitur eu congue orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam sed aliquet neque, non iaculis ante. Mauris in dui eros. Etiam commodo lacus quis sem tempor, sed iaculis eros feugiat. Maecenas bibendum sollicitudin hendrerit. Proin dictum eget leo at luctus. Praesent diam purus, lobortis nec dictum eu, malesuada at augue. Cras sit amet lobortis ex, non imperdiet nisl. Sed eget lectus nec dui lobortis viverra quis id ex. Pellentesque ullamcorper tincidunt lacus, sed ornare eros rhoncus nec. Praesent tincidunt ex vitae est porta faucibus. Nullam tempor ac sapien sed lobortis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis laoreet dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris molestie luctus tortor, sit amet gravida lacus commodo sit amet. Curabitur eu congue orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam sed aliquet neque, non iaculis ante. Mauris in dui eros. Etiam commodo lacus quis sem tempor, sed iaculis eros feugiat. Maecenas bibendum sollicitudin hendrerit. Proin dictum eget leo at luctus. Praesent diam purus, lobortis nec dictum eu, malesuada at augue. Cras sit amet lobortis ex, non imperdiet nisl. Sed eget lectus nec dui lobortis viverra quis id ex. Pellentesque ullamcorper tincidunt lacus, sed ornare eros rhoncus nec. Praesent tincidunt ex vitae est porta faucibus. Nullam tempor ac sapien sed lobortis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis laoreet dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris molestie luctus tortor, sit amet gravida lacus commodo sit amet. Curabitur eu congue orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam sed aliquet neque, non iaculis ante. Mauris in dui eros. Etiam commodo lacus quis sem tempor, sed iaculis eros feugiat. Maecenas bibendum sollicitudin hendrerit. Proin dictum eget leo at luctus. Praesent diam purus, lobortis nec dictum eu, malesuada at augue. Cras sit amet lobortis ex, non imperdiet nisl. Sed eget lectus nec dui lobortis viverra quis id ex. Pellentesque ullamcorper tincidunt lacus, sed ornare eros rhoncus nec. Praesent tincidunt ex vitae est porta faucibus. Nullam tempor ac sapien sed lobortis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis laoreet dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris molestie luctus tortor, sit amet gravida lacus commodo sit amet. Curabitur eu congue orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam sed aliquet neque, non iaculis ante. Mauris in dui eros. Etiam commodo lacus quis sem tempor, sed iaculis eros feugiat. Maecenas bibendum sollicitudin hendrerit. Proin dictum eget leo at luctus. Praesent diam purus, lobortis nec dictum eu, malesuada at augue. Cras sit amet lobortis ex, non imperdiet nisl. Sed eget lectus nec dui lobortis viverra quis id ex. Pellentesque ullamcorper tincidunt lacus, sed ornare eros rhoncus nec. Praesent tincidunt ex vitae est porta faucibus. Nullam tempor ac sapien sed lobortis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis laoreet dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris molestie luctus tortor, sit amet gravida lacus commodo sit amet. Curabitur eu congue orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam sed aliquet neque, non iaculis ante. Mauris in dui eros. Etiam commodo lacus quis sem tempor, sed iaculis eros feugiat. Maecenas bibendum sollicitudin hendrerit. Proin dictum eget leo at luctus. Praesent diam purus, lobortis nec dictum eu, malesuada at augue. Cras sit amet lobortis ex, non imperdiet nisl. Sed eget lectus nec dui lobortis viverra quis id ex. Pellentesque ullamcorper tincidunt lacus, sed ornare eros rhoncus nec. Praesent tincidunt ex vitae est porta faucibus. Nullam tempor ac sapien sed lobortis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis laoreet dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris molestie luctus tortor, sit amet gravida lacus commodo sit amet. Curabitur eu congue orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam sed aliquet neque, non iaculis ante. Mauris in dui eros. Etiam commodo lacus quis sem tempor, sed iaculis eros feugiat. Maecenas bibendum sollicitudin hendrerit. Proin dictum eget leo at luctus. Praesent diam purus, lobortis nec dictum eu, malesuada at augue. Cras sit amet lobortis ex, non imperdiet nisl. Sed eget lectus nec dui lobortis viverra quis id ex. Pellentesque ullamcorper tincidunt lacus, sed ornare eros rhoncus nec. Praesent tincidunt ex vitae est porta faucibus. Nullam tempor ac sapien sed lobortis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis laoreet dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris molestie luctus tortor, sit amet gravida lacus commodo sit amet. Curabitur eu congue orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam sed aliquet neque, non iaculis ante. Mauris in dui eros. Etiam commodo lacus quis sem tempor, sed iaculis eros feugiat. Maecenas bibendum sollicitudin hendrerit. Proin dictum eget leo at luctus. Praesent diam purus, lobortis nec dictum eu, malesuada at augue. Cras sit amet lobortis ex, non imperdiet nisl. Sed eget lectus nec dui lobortis viverra quis id ex. Pellentesque ullamcorper tincidunt lacus, sed ornare eros rhoncus nec. Praesent tincidunt ex vitae est porta faucibus. Nullam tempor ac sapien sed lobortis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis laoreet dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris molestie luctus tortor, sit amet gravida lacus commodo sit amet. Curabitur eu congue orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam sed aliquet neque, non iaculis ante. Mauris in dui eros. Etiam commodo lacus quis sem tempor, sed iaculis eros feugiat. Maecenas bibendum sollicitudin hendrerit. Proin dictum eget leo at luctus. Praesent diam purus, lobortis nec dictum eu, malesuada at augue. Cras sit amet lobortis ex, non imperdiet nisl. Sed eget lectus nec dui lobortis viverra quis id ex. Pellentesque ullamcorper tincidunt lacus, sed ornare eros rhoncus nec. Praesent tincidunt ex vitae est porta faucibus. Nullam tempor ac sapien sed lobortis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis laoreet dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris molestie luctus tortor, sit amet gravida lacus commodo sit amet. Curabitur eu congue orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam sed aliquet neque, non iaculis ante. Mauris in dui eros. Etiam commodo lacus quis sem tempor, sed iaculis eros feugiat. Maecenas bibendum sollicitudin hendrerit. Proin dictum eget leo at luctus. Praesent diam purus, lobortis nec dictum eu, malesuada at augue. Cras sit amet lobortis ex, non imperdiet nisl. Sed eget lectus nec dui lobortis viverra quis id ex. Pellentesque ullamcorper tincidunt lacus, sed ornare eros rhoncus nec. Praesent tincidunt ex vitae est porta faucibus. Nullam tempor ac sapien sed lobortis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis laoreet dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris molestie luctus tortor, sit amet gravida lacus commodo sit amet. Curabitur eu congue orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam sed aliquet neque, non iaculis ante. Mauris in dui eros. Etiam commodo lacus quis sem tempor, sed iaculis eros feugiat. Maecenas bibendum sollicitudin hendrerit. Proin dictum eget leo at luctus. Praesent diam purus, lobortis nec dictum eu, malesuada at augue. Cras sit amet lobortis ex, non imperdiet nisl. Sed eget lectus nec dui lobortis viverra quis id ex. Pellentesque ullamcorper tincidunt lacus, sed ornare eros rhoncus nec. Praesent tincidunt ex vitae est porta faucibus. Nullam tempor ac sapien sed lobortis.")">
    Update
</Button>

---

My advice is to move the mutation logic somewhere else. Or use a new variable to display the value in new-line mode. Did you consider some other components like ListGroup or ListView?

[NeoCoderMatrix86]

Ok, thanks for your support. I considered the components, but basically for the user it is just a textarea he needs to edit the filecontent. I'm thinking of moving the FileContent like you said to a property and change this property value when the content has been loaded. I will try around more :)

[NeoCoderMatrix86]

I think one problem is also that the MemoEdit is not visible at first, but the text is set directly. I tried around and this doesn't work:

@inject ITextLocalizer<ImportFileView> _localizer
@inject SessionStateContainer _sessionStateContainer

<Card>
    <CardHeader>
        <Tabs @bind-SelectedTab="selectedTab">
            <Items>
                <Tab Name="recognizedFilecontent">@_localizer["Preview"]</Tab>
                <Tab Name="editFilecontent">@_localizer["Edit"]</Tab>
            </Items>
        </Tabs>
    </CardHeader>
    <CardBody>
        <TabsContent @bind-SelectedPanel="selectedTab">
            <TabPanel Name="recognizedFilecontent">
                <Button Color="Color.Primary" Clicked="@(()=> fileContent= "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis laoreet dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris molestie luctus tortor, sit amet gravida lacus commodo sit amet. Curabitur eu congue orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam sed aliquet neque, non iaculis ante. Mauris in dui eros. Etiam commodo lacus quis sem tempor, sed iaculis eros feugiat. Maecenas bibendum sollicitudin hendrerit. Proin dictum eget leo at luctus. Praesent diam purus, lobortis nec dictum eu, malesuada at augue. Cras sit amet lobortis ex, non imperdiet nisl. Sed eget lectus nec dui lobortis viverra quis id ex. Pellentesque ullamcorper tincidunt lacus, sed ornare eros rhoncus nec. Praesent tincidunt ex vitae est porta faucibus. Nullam tempor ac sapien sed lobortis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis laoreet dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris molestie luctus tortor, sit amet gravida lacus commodo sit amet. Curabitur eu congue orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam sed aliquet neque, non iaculis ante. Mauris in dui eros. Etiam commodo lacus quis sem tempor, sed iaculis eros feugiat. Maecenas bibendum sollicitudin hendrerit. Proin dictum eget leo at luctus. Praesent diam purus, lobortis nec dictum eu, malesuada at augue. Cras sit amet lobortis ex, non imperdiet nisl. Sed eget lectus nec dui lobortis viverra quis id ex. Pellentesque ullamcorper tincidunt lacus, sed ornare eros rhoncus nec. Praesent tincidunt ex vitae est porta faucibus. Nullam tempor ac sapien sed lobortis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis laoreet dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris molestie luctus tortor, sit amet gravida lacus commodo sit amet. Curabitur eu congue orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam sed aliquet neque, non iaculis ante. Mauris in dui eros. Etiam commodo lacus quis sem tempor, sed iaculis eros feugiat. Maecenas bibendum sollicitudin hendrerit. Proin dictum eget leo at luctus. Praesent diam purus, lobortis nec dictum eu, malesuada at augue. Cras sit amet lobortis ex, non imperdiet nisl. Sed eget lectus nec dui lobortis viverra quis id ex. Pellentesque ullamcorper tincidunt lacus, sed ornare eros rhoncus nec. Praesent tincidunt ex vitae est porta faucibus. Nullam tempor ac sapien sed lobortis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis laoreet dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris molestie luctus tortor, sit amet gravida lacus commodo sit amet. Curabitur eu congue orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam sed aliquet neque, non iaculis ante. Mauris in dui eros. Etiam commodo lacus quis sem tempor, sed iaculis eros feugiat. Maecenas bibendum sollicitudin hendrerit. Proin dictum eget leo at luctus. Praesent diam purus, lobortis nec dictum eu, malesuada at augue. Cras sit amet lobortis ex, non imperdiet nisl. Sed eget lectus nec dui lobortis viverra quis id ex. Pellentesque ullamcorper tincidunt lacus, sed ornare eros rhoncus nec. Praesent tincidunt ex vitae est porta faucibus. Nullam tempor ac sapien sed lobortis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis laoreet dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris molestie luctus tortor, sit amet gravida lacus commodo sit amet. Curabitur eu congue orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam sed aliquet neque, non iaculis ante. Mauris in dui eros. Etiam commodo lacus quis sem tempor, sed iaculis eros feugiat. Maecenas bibendum sollicitudin hendrerit. Proin dictum eget leo at luctus. Praesent diam purus, lobortis nec dictum eu, malesuada at augue. Cras sit amet lobortis ex, non imperdiet nisl. Sed eget lectus nec dui lobortis viverra quis id ex. Pellentesque ullamcorper tincidunt lacus, sed ornare eros rhoncus nec. Praesent tincidunt ex vitae est porta faucibus. Nullam tempor ac sapien sed lobortis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis laoreet dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris molestie luctus tortor, sit amet gravida lacus commodo sit amet. Curabitur eu congue orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam sed aliquet neque, non iaculis ante. Mauris in dui eros. Etiam commodo lacus quis sem tempor, sed iaculis eros feugiat. Maecenas bibendum sollicitudin hendrerit. Proin dictum eget leo at luctus. Praesent diam purus, lobortis nec dictum eu, malesuada at augue. Cras sit amet lobortis ex, non imperdiet nisl. Sed eget lectus nec dui lobortis viverra quis id ex. Pellentesque ullamcorper tincidunt lacus, sed ornare eros rhoncus nec. Praesent tincidunt ex vitae est porta faucibus. Nullam tempor ac sapien sed lobortis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis laoreet dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris molestie luctus tortor, sit amet gravida lacus commodo sit amet. Curabitur eu congue orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam sed aliquet neque, non iaculis ante. Mauris in dui eros. Etiam commodo lacus quis sem tempor, sed iaculis eros feugiat. Maecenas bibendum sollicitudin hendrerit. Proin dictum eget leo at luctus. Praesent diam purus, lobortis nec dictum eu, malesuada at augue. Cras sit amet lobortis ex, non imperdiet nisl. Sed eget lectus nec dui lobortis viverra quis id ex. Pellentesque ullamcorper tincidunt lacus, sed ornare eros rhoncus nec. Praesent tincidunt ex vitae est porta faucibus. Nullam tempor ac sapien sed lobortis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis laoreet dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris molestie luctus tortor, sit amet gravida lacus commodo sit amet. Curabitur eu congue orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam sed aliquet neque, non iaculis ante. Mauris in dui eros. Etiam commodo lacus quis sem tempor, sed iaculis eros feugiat. Maecenas bibendum sollicitudin hendrerit. Proin dictum eget leo at luctus. Praesent diam purus, lobortis nec dictum eu, malesuada at augue. Cras sit amet lobortis ex, non imperdiet nisl. Sed eget lectus nec dui lobortis viverra quis id ex. Pellentesque ullamcorper tincidunt lacus, sed ornare eros rhoncus nec. Praesent tincidunt ex vitae est porta faucibus. Nullam tempor ac sapien sed lobortis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis laoreet dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris molestie luctus tortor, sit amet gravida lacus commodo sit amet. Curabitur eu congue orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam sed aliquet neque, non iaculis ante. Mauris in dui eros. Etiam commodo lacus quis sem tempor, sed iaculis eros feugiat. Maecenas bibendum sollicitudin hendrerit. Proin dictum eget leo at luctus. Praesent diam purus, lobortis nec dictum eu, malesuada at augue. Cras sit amet lobortis ex, non imperdiet nisl. Sed eget lectus nec dui lobortis viverra quis id ex. Pellentesque ullamcorper tincidunt lacus, sed ornare eros rhoncus nec. Praesent tincidunt ex vitae est porta faucibus. Nullam tempor ac sapien sed lobortis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis laoreet dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris molestie luctus tortor, sit amet gravida lacus commodo sit amet. Curabitur eu congue orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam sed aliquet neque, non iaculis ante. Mauris in dui eros. Etiam commodo lacus quis sem tempor, sed iaculis eros feugiat. Maecenas bibendum sollicitudin hendrerit. Proin dictum eget leo at luctus. Praesent diam purus, lobortis nec dictum eu, malesuada at augue. Cras sit amet lobortis ex, non imperdiet nisl. Sed eget lectus nec dui lobortis viverra quis id ex. Pellentesque ullamcorper tincidunt lacus, sed ornare eros rhoncus nec. Praesent tincidunt ex vitae est porta faucibus. Nullam tempor ac sapien sed lobortis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis laoreet dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris molestie luctus tortor, sit amet gravida lacus commodo sit amet. Curabitur eu congue orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam sed aliquet neque, non iaculis ante. Mauris in dui eros. Etiam commodo lacus quis sem tempor, sed iaculis eros feugiat. Maecenas bibendum sollicitudin hendrerit. Proin dictum eget leo at luctus. Praesent diam purus, lobortis nec dictum eu, malesuada at augue. Cras sit amet lobortis ex, non imperdiet nisl. Sed eget lectus nec dui lobortis viverra quis id ex. Pellentesque ullamcorper tincidunt lacus, sed ornare eros rhoncus nec. Praesent tincidunt ex vitae est porta faucibus. Nullam tempor ac sapien sed lobortis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis laoreet dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris molestie luctus tortor, sit amet gravida lacus commodo sit amet. Curabitur eu congue orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam sed aliquet neque, non iaculis ante. Mauris in dui eros. Etiam commodo lacus quis sem tempor, sed iaculis eros feugiat. Maecenas bibendum sollicitudin hendrerit. Proin dictum eget leo at luctus. Praesent diam purus, lobortis nec dictum eu, malesuada at augue. Cras sit amet lobortis ex, non imperdiet nisl. Sed eget lectus nec dui lobortis viverra quis id ex. Pellentesque ullamcorper tincidunt lacus, sed ornare eros rhoncus nec. Praesent tincidunt ex vitae est porta faucibus. Nullam tempor ac sapien sed lobortis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis laoreet dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris molestie luctus tortor, sit amet gravida lacus commodo sit amet. Curabitur eu congue orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam sed aliquet neque, non iaculis ante. Mauris in dui eros. Etiam commodo lacus quis sem tempor, sed iaculis eros feugiat. Maecenas bibendum sollicitudin hendrerit. Proin dictum eget leo at luctus. Praesent diam purus, lobortis nec dictum eu, malesuada at augue. Cras sit amet lobortis ex, non imperdiet nisl. Sed eget lectus nec dui lobortis viverra quis id ex. Pellentesque ullamcorper tincidunt lacus, sed ornare eros rhoncus nec. Praesent tincidunt ex vitae est porta faucibus. Nullam tempor ac sapien sed lobortis.")">
                    Update
                </Button>
                <Text>
                    @if (FileContentRecognized != null)
                    {
                        <pre>
                            @foreach (var line in FileContentRecognized)
                            {
                                if (line != null)
                                {
                                    @((MarkupString)String.Format("{0}<br />", line))
                                }
                            }
                        </pre>
                    }
                </Text>
            </TabPanel>
            <TabPanel Name="editFilecontent">
                <MemoEdit Text="@fileContent" TextChanged="FileContent_TextChanged" AutoSize />
            </TabPanel>
        </TabsContent>
    </CardBody>
</Card>

@code {
    //TODO: FileContent height
    //TODO: Enable input of tabs

    String selectedTab = "recognizedFilecontent";
    String? fileContent;

    public IEnumerable<String?>? FileContentRecognized
    {
        get
        {
            if (_sessionStateContainer.TextImportFile != null)
            {
                return _sessionStateContainer.TextImportFile.FileContentRecognized;
            }
            if (_sessionStateContainer.CuesheetImportFile != null)
            {
                return _sessionStateContainer.CuesheetImportFile.FileContentRecognized;
            }
            return null;
        }
    }

    public void Dispose()
    {
        _sessionStateContainer.ImportCuesheetChanged -= SessionStateContainer_ImportCuesheetChanged;
    }

    protected override void OnInitialized()
    {
        base.OnInitialized();
        _sessionStateContainer.ImportCuesheetChanged += SessionStateContainer_ImportCuesheetChanged;
    }

    void SessionStateContainer_ImportCuesheetChanged(object? sender, EventArgs e)
    {
        //TODO?!
        StateHasChanged();
    }

    void FileContent_TextChanged(string text)
    {
        //TODO
    }
}

So does the MemoEdit need to be visible to be autosized?

[stsrki]

That's a good question. As long as it is present in the DOM I think it should work.

Note* I haven't tested it yet.

[NeoCoderMatrix86]

It needs to be visible to be autosized. I just made it working with this code

<!--
This file is part of AudioCuesheetEditor.

AudioCuesheetEditor is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

AudioCuesheetEditor is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with Foobar.  If not, see
<http: //www.gnu.org/licenses />.
-->
@implements IDisposable

@inject ITextLocalizer<ImportFileView> _localizer
@inject SessionStateContainer _sessionStateContainer

<Card>
    <CardHeader>
        <Tabs SelectedTab="@selectedTab" SelectedTabChanged="SelectedTabChanged">
            <Items>
                <Tab Name="recognizedFilecontent">@_localizer["Preview"]</Tab>
                <Tab Name="editFilecontent">@_localizer["Edit"]</Tab>
            </Items>
        </Tabs>
    </CardHeader>
    <CardBody>
        <TabsContent @bind-SelectedPanel="selectedTab">
            <TabPanel Name="recognizedFilecontent">
                <Text Class="form-control">
                    @if (FileContentRecognized != null)
                    {
                        <pre>
                            @foreach (var line in FileContentRecognized)
                            {
                                if (line != null)
                                {
                                    @((MarkupString)String.Format("{0}<br />", line))
                                }
                            }
                        </pre>
                    }
                </Text>
            </TabPanel>
            <TabPanel Name="editFilecontent">
                <MemoEdit Text="@fileContent" TextChanged="FileContent_TextChanged" AutoSize />
            </TabPanel>
        </TabsContent>
    </CardBody>
</Card>

@code {
    String selectedTab = "recognizedFilecontent";
    String? fileContent;

    public IEnumerable<String?>? FileContentRecognized => _sessionStateContainer.Importfile?.FileContentRecognized;

    public void Dispose()
    {
        _sessionStateContainer.ImportCuesheetChanged -= SessionStateContainer_ImportCuesheetChanged;
    }

    protected override void OnInitialized()
    {
        base.OnInitialized();
        _sessionStateContainer.ImportCuesheetChanged += SessionStateContainer_ImportCuesheetChanged;
    }

    void SelectedTabChanged(string newTabName)
    {
        selectedTab = newTabName;
        fileContent = null;
        if (newTabName == "editFilecontent")
        {
            //Set fileContent just when component is visible in order to autosize the MemoEdit
            if (_sessionStateContainer.Importfile != null)
            {
                fileContent = String.Join(Environment.NewLine, _sessionStateContainer.Importfile.FileContent);
            }
        }
    }

    void SessionStateContainer_ImportCuesheetChanged(object? sender, EventArgs e)
    {
        StateHasChanged();
    }

    void FileContent_TextChanged(string text)
    {
        var fileContentValue = text?.Split(Environment.NewLine);
        if ((fileContentValue != null) && (_sessionStateContainer.Importfile != null))
        {
            _sessionStateContainer.Importfile.FileContent = fileContentValue;
        }
    }
}